css 计数器 counter counter-reset counter-increment counter() counters()

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, '.') ' ';
}

    
第一章
    
第二章
      

        
第二章第一节课
        
第二章第一节课
      
    
    
第三章
      

        
第三章第一节课
          

            
第三章第一节课补充
          
        
        
第三章第一节课 
      
    
    
第四章
    
第五章

结果