1. counter-reset 計數(shù)器-重置

語法：

div {
  counter-reset: name 0;
// counter-reset: 計數(shù)器名稱 初始值
}

初始值：默認0，可為負值，如果是小數(shù)，Chrome會向下取整，如2.99 -> 2，其他瀏覽器可能會重置為0
counter-reset 可以多個計數(shù)器同時命名，比如 counter-reset: name1 0 name2 0 name3 0.

2. counter-increment 計數(shù)器

counter-increment 出現(xiàn)一次，計數(shù)器的值就增加相應(yīng)的值，counter-increment 可以設(shè)置：

counter-increment: name 3;

表示 name 計數(shù)器的值一次增加3. 還可以設(shè)置為負值，表示遞減。

3. counter() 顯示計數(shù)

counter() 方法的作用是顯示計數(shù)，counter(name) ， 還可以 counter(name, style)，style 支持的關(guān)鍵字值就是 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() 顯示嵌套計數(shù)

counters(name, string)
// string 必須，表示子序號的連接字符串

舉個例子表示嵌套計數(shù)

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

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

<ol>
    <li>第一章</li>
    <li>第二章
      <ol>
        <li>第二章第一節(jié)課</li>
        <li>第二章第一節(jié)課</li>
      </ol>
    </li>
    <li>第三章
      <ol>
        <li>第三章第一節(jié)課
          <ol>
            <li>第三章第一節(jié)課補充</li>
          </ol>
        </li>
        <li>第三章第一節(jié)課 </li>
      </ol>
    </li>
    <li>第四章</li>
    <li>第五章</li>
</ol>

結(jié)果