HTML怎么做CSS计数器_html CSS counter计数器使用方法教程

纯CSS自动编号需三步：先用counter-reset在父容器初始化计数器，再用counter-increment在目标元素上递增，最后通过::before伪元素的content配合counter()或counters()显示编号；漏写counter-reset或作用域错误是h2无编号主因。

纯 CSS 实现自动编号，不需要 JS、不依赖 <ol>，关键就三步：先用 counter-reset 定义计数器，再用 counter-increment 控制它在哪加，最后靠 content + counter() 或 counters() 把数字塞进页面里。顺序错了就显示不出来。

为什么 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 同一计数器，重置优先，再递增

真正容易被忽略的是作用域继承规则：计数器不是全局变量，它按 DOM 树向下传递，但会被新 counter-reset 截断。比如在 h1 里写 counter-reset: section，那它内部所有子元素看到的都是这个新起点，和外部 body 里的 section 无关。嵌套深了，得一层层检查重置点是否合理。