css 计数器 counter counter-reset co

1. counter-reset 计数器-重置

语法：

div {
  counter-reset: name 0;
// counter-reset: 计数器名称 初始值
}

初始值：默认0，可为负值，如果是小数，Chrome会向下取整，如2.99 -> 2，其他浏览器可能会重置为0
counter-reset 可以多个计数器同时命名，比如 counter-reset: name1 0 name2 0 name3 0.

2. counter-increment 计数器

counter-increment 出现一次，计数器的值就增加相应的值，counter-increment 可以设置：

counter-increment: name 3;

表示 name 计数器的值一次增加3. 还可以设置为负值，表示递减。

3. counter() 显示计数

counter() 方法的作用是显示计数，counter(name) ， 还可以 counter(name, style)，style 支持的关键字值就是 list-style-type:

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | lower-latin | upper-latin

4.counters() 显示嵌套计数

counters(name, string)
// string 必须，表示子序号的连接字符串

举个例子表示嵌套计数

ol {
    counter-reset: section;
    list-style-type: none;
}

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

<ol>
    <li>第一章</li>
    <li>第二章
      <ol>
        <li>第二章第一节课</li>
        <li>第二章第一节课</li>
      </ol>
    </li>
    <li>第三章
      <ol>
        <li>第三章第一节课
          <ol>
            <li>第三章第一节课补充</li>
          </ol>
        </li>
        <li>第三章第一节课 </li>
      </ol>
    </li>
    <li>第四章</li>
    <li>第五章</li>
</ol>