javascript html嵌入js HTML/CSS自动编号标题?



html css javascript关系 (5)

列表做到了,为什么不是其他元素? http://www.w3.org/TR/CSS2/generate.html#scope

https://ffff65535.com

有没有一种方法(理想情况下容易)在HTML / CSS中制作标题和部分自动编号? 也许是一个JS库?

或者这是在HTML中难以做到的事情?

我正在查看公司wiki的应用程序,但我们希望能够像使用文字处理器一样使用标题编号。


可以通过服务器端或JavaScript来完成。 不知道任何预制的脚本,但它。

至少不可能使用HTML / CSS,除非您手动将所有数字添加到您的标题中。


最简单的方法是编号列表

<ol>
<li> Section
    <ol>
      <li>Nested one</li>
      <li>Nested two</li>
    </ol>
</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
<ol>

会是这样的:

  1. 部分
    I.嵌套一个
    II。 嵌套两个
  2. 部分
  3. 部分
  4. 部分


绝对可能使用CSS计数器 - 只要确保你注意浏览器兼容性...:

这将使h2得到1.,2.,h3得到1.1,2.1,2.2等...

<style>
   body{counter-reset: section}
   h2{counter-reset: sub-section}
   h3{counter-reset: composite}
   h4{counter-reset: detail}

   h2:before{
     counter-increment: section;
     content: counter(section) " ";
   }
   h3:before{
     counter-increment: sub-section;
     content: counter(section) "." counter(sub-section) " ";
   }
   h4:before{
     counter-increment: composite;
     content: counter(section) "." counter(sub-section) "." counter(composite) " ";
   }
   h5:before{
     counter-increment: detail;
     content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";
   }
   </style>

正如lpfavreau所说, 这与我认为的另一个问题是一样的

还要注意,使用CSS 不会改变标题(例如,选定的文本会给你没有数字的标题)。 这可能或可能不合意。 lpfavreau的(接受)答案会给你jQuery代码来修改标题文本。

第三方编辑

用上面的css创建了一个例子





css