css -- counter计数

一、计数器铁三角

• css计数器只能跟content属性一起才有作用，content属性是在before/after伪元素上的。
• 形成 “计数器 — 伪元素 — content属性” 铁三角关系。

二、使用规则

关键点：

1. 计数器名称 counter-reset
2. 计数器增长规则 counter-increment
3. 开始报数 counter()/counters()

1. counter-rest

（计数器重置）

• 第一个参数，给计数器起个名字
• 第二个参数，计数器开始的数字，默认0
• 支持负数和小数，

例1：基本用法，在段落前面加一个序号

    
一些测试文字

效果：

---

例2 ：设置第二个参数，起始值

    
一些测试文字

效果：

---

例3 ：多个计数器同时命名（一个从基数是1，一个基数是10）

效果：

---

2. counter-increment

（计数器-递增）

1. 值为计数器一个或多个关键字（名称）
2. 第二个参数为计数变化值（每次递增值），默认为1

例1：基本使用，默认自增1

效果：

---

例2：第二个参数设置，自增3

（基数从3开始，并自增3）

效果：

---

2.1 自增长也可以放在伪元素上：

（结果同上）

2.2 自增长分别放在元素和伪元素上的情况？

1. 分别都计算一次
2. 只要有counter-increment,对应的计数器的值就会变化
   
   效果：
   

---

2.3 多个increment

1. counter-rest 可以一次命名多个，increment也有与之呼应的设定

效果：

---

2.4 父与子increment组合

计数器的数值变化遵循HTML渲染顺序，遇到一个increment计数器就变化，什么时候counter输出就输出此时的计数值

效果：

---

3. counter()

• 是方法不是属性，类似calc()
• 作用就是显示计数
• 语法：counter(name,style)
  /* name: 计数器名称
  style: 就是支持list-style-type 支持的那些值
  */

例1：罗马数字和0开头的数字标记

效果：

---

例2：counter还支持级联

• 一个content属性值可以有多个counter()方法。
  
  效果：
  

---

4. counters()

• 嵌套计数
• 子序号
• 语法：counters(name， string，style)
  string参数为字符串（需要引号），表示子序号的连接字符串
  例如1.1的string就是’.’, 1-1就是’-’.
• 我们平时的序号，不可能就只是1,2,3,4,…, 还会有诸如 1.1,1.2,1.3,…等的子序号。得，前者就是counter()干的事情，后者就是counters()干的事情

    

        

            爷爷一
            

                
大伯父
                
爸爸
                    

                        
孩子一
                        
孩子二
                            

                                
孙子一
                                
孙子二
                            
                        
                    
                
            
        
        

            爷爷二
        
        

            爷爷三
            

                
大伯父
                
大伯父
                    

                        
大儿子
                        
小儿子
                    
                
            
        
    

效果：

---

最后的最后是想说工作中碰到一个要显示坐标轴的业务场景，突然就想到了计数器，具体使用都忘记了，还是百度了一把cv完成了功能。然后觉得这个属性确实有点厉害，作为知识点记录和分享一下。链接中大佬的文章实在是写的很厉害了，引用了很多描述和案例

相关链接：
CSS counter计数器(content目录序号自动递增)详解