必须先用counter-reset初始化计数器，再用counter-increment触发递增，否则counter()显示0或空白；典型搭配是祖先元素设counter-reset，目标元素设counter-increment，伪元素content中调用counter()或counters()生成编号。
counter-reset 和 counter-increment 怎么配对用
必须先 counter-reset 初始化计数器，再用 counter-increment 触发递增，否则 counter() 显示为 0 或空白。常见错误是只写 counter-increment 却漏掉重置——比如给所有 <h2></h2> 加编号，但没在 <article></article> 或 上设 counter-reset: section，结果所有 <h2></h2> 都显示 “1”。
典型搭配：
article {
counter-reset: section;
}
h2 {
counter-increment: section;
}
h2::before {
content: counter(section) ". ";
}
注意：counter-reset 可以一次定义多个计数器（counter-reset: section subsection），也可带初始值（counter-reset: section 0），不写默认从 0 开始，counter-increment 每次 +1。
嵌套章节（如 2.1、2.1.3）怎么生成多级编号
靠多层计数器 + counter() 的第二个参数实现。每个层级独立 counter-reset 和 counter-increment，父级重置不影响子级，但子级可引用父级值。
关键点：
-
counter(section)只输出当前层级值 -
counter(subsection, decimal)第二个参数是样式，可选decimal、lower-roman、upper-alpha等 - 拼接多级用空格分隔：
counter(section) "." counter(subsection)
示例：
h2 { counter-reset: subsection; counter-increment: section; }
h3 { counter-increment: subsection; }
h2::before { content: counter(section) ". "; }
h3::before { content: counter(section) "." counter(subsection) " "; }
这样 <h2></h2> 是 “1.”、“2.”；其后的 <h3></h3> 就是 “1.1”、“1.2”、“2.1”……
为什么 ::before 里用 counter() 没反应
最常见三个原因：
- 元素没渲染成盒（比如
display: none或visibility: hidden），伪元素不会触发计数 -
counter()写在非生成内容属性中（如color: counter(section)），它只在content里有效 - 计数器名大小写不一致（
counter(SECTION)≠counter(section)），CSS 计数器名区分大小写
调试建议：先确保 counter-reset 在祖先元素上，再检查 counter-increment 是否作用在目标元素自身（不是父级或子级），最后确认 ::before 的 content 值合法（不能为 none 或空字符串）。
counter() 和 counters() 的区别和适用场景
counter() 只取单级值，counters() 自动展开嵌套路径，更适合多级目录编号。
比如有 h2 → h3 → h4 结构，且都设置了对应计数器：
-
counter(section)在h4中只输出最内层数字（如 “3”） -
counters(section, ".")输出完整路径（如 “1.2.3”） -
counters(subsection, "-")用短横线连接（如 “1-2-3”）
注意：counters() 第二个参数是分隔符，必须是字符串（带引号），且只接受一个计数器名——它会自动向上查找所有同名计数器实例，按嵌套深度拼接。
实际用法常是：h4::before { content: counters(section, ".") " "; }，比手动拼 counter(section) "." counter(subsection) "." counter(subsub) 更健壮，也避免漏写某一层。
嵌套深、结构固定时优先用 counters()；需要混用不同样式（比如章用阿拉伯数字、节用罗马字）就只能拆开用多个 counter()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
