css counters css计数器
css计数器用来定义css维护的变量,可以计算元素的个数以添加序号
counter-reset
用来重置计数器值到一个给定的变量,一般设置在父元素上。
counter-increment
用来累加计数器值,一般设置在子元素上。
counter()
counter()函数计算元素的计数器值。
counters()
在不同级别嵌套的计数器值之间插入字符串。
下面是例子:
html:
<h3>Introduction</h3> <h3>Body</h3> <h3>Conclusion</h3>
css:
body { counter-reset: section; /* 重置计数器成0 */ } h3:before { counter-increment: section; /* 增加计数器值 */ content: "Section " counter(section) ": "; /* 显示计数器 */ }
效果:
html:
<ol> <li>item</li> <!-- 1 --> <li>item <!-- 2 --> <ol> <li>item</li> <!-- 2.1 --> <li>item</li> <!-- 2.2 --> <li>item <!-- 2.3 --> <ol> <li>item</li> <!-- 2.3.1 --> <li>item</li> <!-- 2.3.2 --> </ol> <ol> <li>item</li> <!-- 2.3.1 --> <li>item</li> <!-- 2.3.2 --> <li>item</li> <!-- 2.3.3 --> </ol> </li> <li>item</li> <!-- 2.4 --> </ol> </li> <li>item</li> <!-- 3 --> <li>item</li> <!-- 4 --> </ol> <ol> <li>item</li> <!-- 1 --> <li>item</li> <!-- 2 --> </ol>
css:
ol { counter-reset: section; /* 为每个ol元素创建新的计数器实例 */ list-style-type: none; } li:before { counter-increment: section; /* 只增加计数器的当前实例 */ content: counters(section, ".") " "; /* 为所有计数器实例增加以“.”分隔的值 */ }
效果: