CSS自动编号实现：counter-increment与before应用

CSS的自动编号功能依赖`counter-increment`与`::before`/`::after`伪元素的content属性协同工作——仅设置计数器不会显示任何数字，必须通过`counter()`或`counters()`函数将计数值“渲染”出来；其中`counter()`适用于单级编号，而`counters()`支持嵌套结构（如1.1、2.3.1），但其分隔符必须是带引号的字符串（如"."），且作用域严格受`counter-reset`控制，错误的重置位置会导致序号错乱；尽管现代浏览器兼容性良好，IE对多层嵌套支持不稳，Shadow DOM中计数器也不自动穿透，实际开发中最易踩坑的并非语法本身，而是隐式的作用域规则和重置时机，稍有不慎就会引发断号、重复或缺失，调试需依赖开发者工具观察computed content值，而非JavaScript读取。

counter-increment 必须配合 content 才能显示编号

只写 counter-increment: section; 不会自动出现数字——它只是在后台计数，真正把数字“画出来”得靠 ::before 伪元素的 content 属性。很多人写了 increment 却没加 content，结果页面完全没变化。

常见错误现象：h2 元素样式里写了 counter-increment: section;，但标题前空空如也。

• 必须搭配 content: counter(section); 或 content: counters(section, ".");
• counter() 是单级计数，counters() 支持嵌套（比如 1.1、1.2）
• content 只在 ::before 或 ::after 中生效，不能用在普通元素上

嵌套编号时 counters() 的分隔符必须是字符串字面量

想实现「1.1」「2.3.1」这种多层编号，要用 counters()，但它第二个参数不是变量，也不是 CSS 变量，必须是带引号的字符串，比如 "." 或 "–"。

使用场景：文档大纲、带子章节的侧边栏目录、嵌套的 FAQ 列表。

• 错误写法：content: counters(section, .); —— 缺少引号，CSS 解析失败，编号不显示
• 正确写法：content: counters(section, ".");
• 如果父级用 counter-reset: section;，子级需同时重置并递增自身，例如：counter-reset: subsection; counter-increment: section subsection;

counter-reset 影响作用域，别在错误位置重置

counter-reset 不是全局清零命令，它只对后续兄弟和后代元素生效，而且会被更内层的同名 counter-reset 覆盖。常有人在 body 里 reset 一次就以为万事大吉，结果二级标题从 1 开始，三级标题却接着一级标题的序号继续累加。

性能影响：频繁重置或深层嵌套不会明显拖慢渲染，但逻辑错乱会让维护成本陡增。

• 章节容器（如 article）应设 counter-reset: section;
• 每个 h2 写 counter-increment: section;
• 每个 h3 写 counter-increment: subsection;，并在其父容器（如 section）设 counter-reset: subsection;
• 不要在 h2::before 里写 counter-reset —— 伪元素无法重置计数器作用域

兼容性没问题，但 IE 对 counters() 支持有坑

所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持 counter-increment 和 counters()，包括移动端。唯一要注意的是 IE8+ 支持 counter()，但 IE9–11 对 counters() 的嵌套层级处理不稳定——比如 counters(section, ".") 在 IE11 里可能漏掉某一层的数字。

容易踩的坑：用 Web Components 或 Shadow DOM 时，计数器默认不跨 shadow boundary 传递，需要显式继承或 JS 辅助。

• 稳妥做法：非必要不依赖超过两层的 counters()，IE 用户占比低可忽略，否则降级为 counter() + 手动 class 控制
• 验证方式：打开 DevTools，在元素上 hover 查看 computed 样式里是否出现 content 计算值
• 注意：伪元素的 content 值无法被 JS 读取，调试只能靠视觉或浏览器开发者工具

最麻烦的不是语法，而是计数器作用域和重置时机的隐式规则——它不像 JS 变量那样直白，改一处可能牵出三处断号。

到这里，我们也就讲完了《CSS自动编号实现：counter-increment与before应用》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！