counter-increment 必须配合 ::before 或 ::after 的 content 属性才能显示编号，仅设置 counter-increment 仅在后台计数；content 必须使用 counter() 或 counters() 函数，后者需带引号的分隔符字符串，如 “.”，且作用域受 counter-reset 限制。
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 变量那样直白，改一处可能牵出三处断号。
