首页 > 网页制作 >HTML+CSS计数器使用教程

HTML+CSS计数器使用教程

来源：互联网 2026-07-31 16:28:17

纯CSS自动编号的实现其实只需三步：先在父容器中使用counter-reset初始化一个计数器，然后在需要编号的元素上使用counter-increment使其递增，最后通过::before伪元素的content属性配合counter()或counters()将数字显示出来。这三步的顺序不可颠倒，否

纯CSS自动编号的实现其实只需三步：先在父容器中使用counter-reset初始化一个计数器，然后在需要编号的元素上使用counter-increment使其递增，最后通过::before伪元素的content属性配合counter()或counters()将数字显示出来。这三步的顺序不可颠倒，否则编号将无法正常显示。

HTML+CSS计数器使用教程

简单来说，纯CSS自动编号无需JavaScript，也不依赖

为什么`h2::before`没显示编号？

h2::before

counter-reset

counter-reset必须写在父级容器上，例如body、article、section等。不能只写在h2自身的样式中——那样计数器并未初始化，实际上不存在。
如果h2被嵌套在多个div中，而这些div的样式为display: none或visibility: hidden，计数器会直接跳过它们。注意，counter-increment在display: none的元素上完全不生效，编号因此消失。
counter-increment和content必须在同一选择器或其伪元素中使用。不能将counter-increment写在h2上，却将content写在h2::before之外——这样两个属性互不关联，编号也无法生成。

`counter()`和`counters()`怎么选？

counter(name)只取当前层级的数值；counters(name, ".")则会将嵌套路径拼接起来，例如1.2.3这样的形式。不要混用，否则编号会混乱。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

单层编号，比如所有h2从1开始，使用counter(section)即可。
章节嵌套，如h1为1、2、3，h2为1.1、1.2、2.1等，需要在h1中写counter-reset: subsection，然后在h2::before中使用counters(section, ".")。
counters()的第二个参数是分隔符，必须是字符串字面量，例如"."或"–"，不能使用变量或CSS变量——否则浏览器不识别。
第三个参数，例如lower-roman这样的罗马数字样式，仅在部分浏览器中支持。实际项目中建议只使用默认的阿拉伯数字，兼容性最好。

`counter-reset`和`counter-increment`的数值怎么设？

很多人以为这两个属性默认值分别是0和1，但实际上它们都支持可选整数参数，可以调整为负数或跳号。

counter-reset: section -1：这样下一个counter-increment: section会显示0。适用于希望编号从0开始的场景。
counter-increment: section 2：每次匹配该元素，计数器增加2。可用于隔行编号或跳过某些项。
多个计数器可以同时操作：例如counter-reset: a 5 b表示重置a到5、b到0；counter-increment: a b 3表示a增加1、b增加3。注意顺序和对应关系。
如果同一元素同时写了counter-reset和counter-increment针对同一计数器，重置优先，然后再递增。