计数器递增属性

最后更新：2026-09-13

counter-increment 计数器递增属性

counter-increment 属性用于递增一个或多个 CSS 计数器，是实现自动编号的核心机制之一。每次元素匹配选择器时，指定的计数器就会增加指定的步长（默认为 1）。它需要配合 counter-reset 和 content 的 counter() 函数才能实现完整的自动编号效果。

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

📝 语法

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

⚙️ 取值

值	类型	描述
`none`	关键字	不递增
`<counter-name> <integer>?`	值	计数器名称与步长

▶ 示例

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

▶ 试一试

🌐 浏览器支持

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

提示： counter-increment 只是递增，不会显示数值；需要配合 content:counter(名称) 在页面上输出。

❓ 常见问题

Qcounter-increment 和 counter-reset 有什么区别？

Acounter-reset 创建并初始化计数器（设置初始值，默认 0），通常在父容器上声明；counter-increment 在每次匹配元素时递增计数器（默认每次 +1），通常写在要编号的子元素上。两者配合 content 的 counter() 函数输出，才能实现完整的自动编号。

Q如何实现 1.1、1.2 这样的多级编号？

A两层计数器：外层 counter-reset: chapter + counter-increment；内层 counter-reset: section + counter-increment；content: counter(chapter) "." counter(section); 即得 1.1 式编号。

Qcounter-increment 的步长可以不是 1 吗？

A可以。counter-increment: myCounter 2; 表示每次递增 2，省略数字默认递增 1；也支持一次递增多个计数器，如 counter-increment: a 1 b 2;，负数同样有效。注意它只改变计数器数值，必须在 content 中用 counter() 输出才能看到编号。

Q计数器在嵌套列表里会乱吗？

A不会。CSS 计数器有作用域机制：在元素上声明 counter-reset 会创建新的计数器实例，父级实例被遮蔽，子列表从初始值重新计数。例如每个 <ol> 都 counter-reset 后，多个列表的编号互不干扰。要延续编号则不要重置，或使用 counters() 输出层级路径。