css计数器语法小记

CSS 计数器通过一个变量来设置，根据规则递增变量。

CSS 计数器使用到以下几个属性：

• counter-reset – 创建或者重置计数器
• counter-increment – 递增变量
• content – 插入生成的内容
• counter() 或 counters() 函数 – 将计数器的值添加到元素

counter() 或 counters() 函数 是 content 属性中的方法。

1. counter-reset 创建或者重置计数器

counter-reset: name;              // 默认从0开始计数
复制代码

counter-reset: name 2;            // 从2开始计数，可以为负数或者小数(小数向下取整)，负数或小数IE和FireFox都不识别，会默认值0来处理。
复制代码

counter-reset: name1 2 name2 3;   // 可以多个计数器同时命名
复制代码

counter-reset: none | inherit;    // 干掉重置 | 继承重置
复制代码

2. counter-increment 递增变量

counter-increment: name;            // 默认+1，每次递增+1
复制代码

counter-increment: name 2;          // 每次递增+2，可以设置为负数，来实现递减排序
复制代码

counter-increment: name1 name2;     // 多个名称（与counter-reset命名相呼应）
复制代码

counter-increment: none | inherit;  // 干掉递增 | 继承递增
复制代码

3. counter() 或者 counters() –将计数器的值添加到元素

counter()

content: counter(name); 
复制代码

content: counter(name,style); 
复制代码

content: counter(name1) counter(name2);
复制代码

style参数支持的关键字值就是 list-style-type 支持的那些值。

counters()

content: counters(name, string);
复制代码

content: counters(name, string, style)
复制代码

string参数为字符串（必须），表示子序号的连接字符串。例如1.1的string就是'.'，1-1就是'-'。

counters()也是支持style自定义递增形式的，表现与counter()的style参数使用一致。

我们平时的序号，不可能就只是1,2,3,4,.., 还会有诸如 1.1,1.2,1.3,…等的子序号。前者就是counter()干的事情，后者就是counters()干的事情。

案例参考

案例链接

CSS计数器与display:none

一个元素，如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性（针对支持浏览器），则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。

浏览器支持

所有主流浏览器都支持counter-reset/counter-increment/Content属性。

注意： IE8只有指定!DOCTYPE才支持counter-reset/counter-increment/Content属性。

结语

此篇为观后感，只对语法上的使用总结排序一下，具体的解析和理解可以看以下的文档和参考链接。

文档链接 MDN
/
文档链接 菜鸟
/
参考链接 张鑫旭