CSS代码(三)：巧用counter实现文档的多级编号

在多级编号功能的实现过程中，我们一般采用JS动态递增的方式，或者采用后端编码的方式，然而还有一种更简单的实现方式，用CSS即可轻松实现。

如果需要展示的层次结构如下：

<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>

只需要添加如下的样式，即可轻松实现文档的多级自动编号：

ol {
    /* 开始计数 */
  counter-reset: section;                
  list-style-type: none;
}

li::before {
  counter-increment: section;           
  content: counters(section,".") " ";  
}

最后的界面效果如下所示：

结论

熟练使用CSS，能减少很多无谓的JS代码，并且维护的工作量远远小于JS代码实现，可更改性也可以更上一个层次。