counter-reset 必须写在章节容器（如 article、section）上而非标题自身，否则每个标题都会重置计数器导致编号恒为1；counter-increment 要加在标题元素（如 h2）上才能递增；编号需通过 ::before 伪元素配合 content: counter() 实现；嵌套编号须用 counters() 并确保父级正确设置 counter-reset 和 counter-increment。
counter-reset 必须写在章节容器上，不是标题自己
很多人把 counter-reset: section; 直接写在 h2 上，结果每个标题都显示 “1”。这是因为 counter-reset 的作用是“在此元素内部新建并初始化计数器”，它定义的是作用域起点。如果写在 h2 上，每个 h2 都会重置一次，编号永远从 0 开始再 +1。
正确做法是把它放在最外层的语义容器上，比如 <article></article>、<section></section> 或 <main></main>：
article {
counter-reset: section;
}
这样所有子级 h2 才能共享同一个计数器，按 DOM 顺序依次递增。
- 若页面有多个
<article></article>，每个都会独立编号（1, 2, 3…），互不影响 - 用
counter-reset: section 1;可跳过封面页，让第一节从 “1” 开始（注意：IE11 不支持非零初始值） - 不要写
counter-reset: section 0;—— 默认就是 0，多此一举
counter-increment 要加在要编号的标题元素上
counter-increment: section; 本身不显示任何内容，它只负责“遇到这个元素就让计数器加 1”。所以必须明确加在你要编号的标题上，比如 h2 或 h3：
h2 {
counter-increment: section;
}
常见错误是只给父容器设了 counter-reset，却忘了在 h2 上写 counter-increment，结果编号全为 0 或根本不出现。
- 支持步长：如
counter-increment: section 2;会让编号变成 1, 3, 5… - 支持负值：如
counter-increment: section -1;可用于回退或合并章节 - 隐藏元素仍会触发：即使
display: none或visibility: hidden，只要在 DOM 中，就会递增
content: counter() 必须配合 ::before 伪元素使用
编号不会自动出现在标题文字前，必须靠 ::before 和 content 注入。直接写 content: "第" counter(section) "章" 很容易翻车：
- 中文空格会被压缩，建议用
\a0（不间断空格）代替普通空格，如"第"\a0counter(section)\a0"章" - 别写成
content: "counter(section)"—— 这是字符串字面量，不是函数调用 -
content只对伪元素有效，不能直接写在h2规则里
稳妥写法：
h2::before {
content: counter(section) ". ";
}
这样输出就是 “1. ”、“2. ”，点紧跟数字，无多余空格。
嵌套章节（如 1.1、2.1.3）必须用 counters()，且层级命名要一致
想让 h3 显示 “1.1”、“1.2”、“2.1”，不能只靠一个计数器。得用两套独立计数器，并靠 counters()（注意是复数）拼接：
h2 {
counter-reset: subsection;
counter-increment: section;
}
h3 {
counter-increment: subsection;
}
h2::before {
content: counter(section) ". ";
}
h3::before {
content: counters(section, ".") "." counter(subsection) " ";
}
关键点：
-
counters(section, ".")会取当前路径上所有名为section的计数器值，用点连接 —— 但它依赖父级是否也设置了counter-increment: section; - 分隔符只能是字符串字面量，比如
"."，不能是 CSS 变量或表达式 - IE11 支持
counter()，但不支持counters()的第三个参数（如decimal-leading-zero），别用
最容易被忽略的是：嵌套层级的 counter-reset 必须写在父级标题上（如 h2），而不是全局或子级上。否则 h3 的编号不会随 h2 变化而重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
