计数器重置属性

最后更新：2026-09-13

counter-reset 计数器重置属性

counter-reset 属性用于创建新的 CSS 计数器并将其初始化为指定值（默认为 0）。它是实现自动编号的第一步，通常在父元素上设置。配合 counter-increment 和 content 的 counter() 函数，可以实现复杂的多级编号系统。

分类
初始值	none
继承	否
适用于
可动画
CSS 版本	CSS2
状态	标准

📝 语法

counter-reset: none | <counter-name> <integer>?;

⚙️ 取值

值	类型	描述
`none`	关键字	不重置
`<counter-name> <integer>?`	值	计数器名称与初始值

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
counter-reset	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： counter-reset 通常设置在编号列表的父容器上，每个父容器会创建独立的计数器作用域。

❓ 常见问题

Qcounter-reset 可以重置已有的计数器吗？

A可以。counter-reset 会把指定计数器设为指定值（默认 0），在嵌套结构中每个声明了 counter-reset 的元素都会创建新的计数器实例，父层的值被遮蔽，从而实现各章节独立编号。不重置计数器则编号会从父作用域延续下去。

Q如何让编号从 10 开始？

A使用 counter-reset: myCounter 9; 把初始值设为 9，然后 counter-increment: myCounter 每次 +1，第一个元素输出就是 10。初始值加 1 才是首元素显示的值，因为递增发生在输出之前，这个"差一"细节常被忽略。

Qcounter-reset 和 counter-increment 哪个先执行？

A在同一个元素上，规范规定 counter-increment 的处理先于 counter-reset。不过实际场景中二者很少写在同一元素上：父元素 counter-reset 初始化，子元素 counter-increment 递增，再在 content 中输出。了解处理顺序可避免嵌套计数器数值偏离预期。

Qcounter-reset: none 有什么作用？

Anone 表示不重置任何计数器，计数器继续沿用父作用域的当前值，适用于希望编号跨元素连续递增的场景。因为默认情况下在元素上声明 counter-reset 会创建新实例（相当于归零），显式写 none 可以声明"不要重置"，让多个区块的编号连续往下排。