因为CSS计数器默认线性递增、不感知DOM嵌套，必须通过在父级（如h2）上设counter-reset重置子级计数器，并在子级（如h3）上用counter-increment递增自身且配合counters()继承父级编号，才能生成“2.1”“2.1.1”等层级编号。
为什么直接用 counter-reset 和 counter-increment 不能生成嵌套层级编号？
很多人一上来就给 h2 加 counter-increment: section;，结果发现所有标题都平级编号（1、2、3…），根本没体现“2.1”“2.1.1”这种文档结构。问题出在 CSS 计数器默认是全局线性递增的，不感知 DOM 嵌套关系。
真正起作用的是层级重置逻辑：每进入一个新层级（比如 h2），要重置其子级计数器（如 subsection）；而子级（如 h3）只负责递增自己的计数器，并继承父级编号。
-
h2触发counter-reset: subsection;—— 每个二级标题都清空三级计数器 -
h3同时使用counter-increment: subsection;和counter-reset: subsubsection; - 显示时用
counter(h2) "." counter(subsection)拼接，不是靠 JS 或 HTML 写死
怎么用 content 和 counter() 拼出带点分隔的多级编号？
CSS 不支持字符串拼接运算符，但 counter() 函数本身可接受第二个参数指定样式（decimal、lower-alpha 等），而多个 counter() 调用在 content 中天然按顺序连接。
h2::before {
counter-increment: h2;
content: counter(h2) ". ";
}
h3::before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". ";
}
注意这里 h3 并没有重置 h2，它只是读取当前 h2 的值——这依赖于计数器作用域：每个计数器在最近的重置祖先内有效，h3 在 h2 元素内部，自然能读到该 h2 的编号。
立即学习“前端免费学习笔记（深入）”；
- 层级越深，
content里写的counter()调用越多，顺序不能错 - 如果某级标题想跳过编号（比如
h4不显示），就别写::before，也不用counter-increment - 小数点必须写成字符串
"."，不能用counter()生成——它只输出数字或字母
遇到 counter() 显示 NaN 或空白怎么办？
最常见原因是计数器名拼写不一致，或者漏了 counter-reset 初始化。CSS 计数器不会自动声明，未 reset 的计数器值为 none，counter(none) 渲染为空白；若名字写错（比如 subection 少个 s），结果也是空白，开发者工具里也看不出报错。
- 检查所有
counter-reset、counter-increment、counter()中的计数器名是否完全一致（区分大小写） -
counter-reset必须写在**包含子元素的父容器**上，比如想让section内的h2独立编号，就得在section上写counter-reset: h2; - 用浏览器开发者工具的“Computed”面板查看元素是否真的有对应计数器值——展开
counter-increment行能看到当前生效的计数器名和数值
如何让目录链接点击后滚动到对应标题且不被顶部遮挡？
编号本身不解决锚点滚动问题，但自动编号常和 TOC 锚点联动。关键在滚动行为：现代浏览器支持 scroll-margin-top，比老式 :target 配合负 margin 更可靠。
h2, h3, h4 {
scroll-margin-top: 60px;
}
这样点击目录里的 #section2 链接，页面滚动后标题会离顶部留出 60px 空隙，避免被固定 header 盖住。注意这个属性作用于目标元素本身，不是 ::before 伪元素——所以必须加在真实标题标签上。
- 不要试图给
::before设置id或scroll-margin，伪元素无法成为滚动锚点 - 如果用了
position: sticky头部，scroll-margin-top值建议大于 sticky 区域高度 - IE 完全不支持
scroll-margin-top，需降级用 JavaScript 监听hashchange手动调整 scrollTop
counter-reset: h2;。 
