CSS counter-reset 属性
CSS counter-reset 属性文档
定义
CSS counter-reset 属性重置计数器的值，它有两个参数：计数器名称和重置值，其中计数器名称必须与 :before 或 :after 伪元素中的 counter-increment 属性一起使用。
该属性的作用是让计数器重置为指定值，以此实现计数器的归零或者重新开始计数的功能。
语法
counter-reset: [计数器名称] [开始值];
其中，
计数器名称（必需）：需要重置的计数器名称。开始值（可选）：重置的起始值，也可以是none，默认值为0或者以计数器的默认步长为单位的数字。
示例
body {
counter-reset: section 2;
}
以上代码表示将计数器 section 重置为2。如果在body元素中使用:before或:after伪元素，并设置计数器section的counter-increment属性，则每个section元素都会从2开始计数。
<body>
<section>
<h2>Section 1</h2>
</section>
<section>
<h2>Section 2</h2>
</section>
<section>
<h2>Section 3</h2>
</section>
</body>
section:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
以上代码中，content属性将获取到的计数器值放在: before伪元素前，并追加“Section ”和“。 ”，例如“Section 3. ”
则渲染效果如下：
Section 2. Section 3. Section 4.
注意事项
counter-reset必须与counter-increment属性一起使用。- 若
counter-reset中指定的计数器名称与counter-increment属性的计数器名称不同，则不会生效。 - 计数器名称不可重复，否则会被视为重复定义而出错。
浏览器兼容性
| Chrome | Firefox | Safari | Opera | IE/Edge |
|---|---|---|---|---|
| 2+ | 1.0+ | 1.0+ | 9+ | 8+ |
总结
CSS counter-reset 属性用于重置计数器，通常与 counter-increment属性结合使用，达到变量自增的效果。在实际开发中，我们可以通过CSS计数器属性实现类似目录、列表、题号等需要逐次累加的需求。但是在使用时，我们也需要特别注意计数器的命名和重置次数，以免出现意外错误。