counter() 返回单级计数器值（如1、2），counters() 返回多级路径式编号（如1.1、1.2.3），后者需配合counter-reset和counter-increment显式声明才能生效。
counter() 和 counters() 的核心区别在哪
用 counter() 只能取单层计数器值，比如一级标题的 1、2、3；而多级嵌套（如 1.1、1.2.3）必须用 counters() —— 它会把父级和当前级的计数器按指定分隔符拼起来。很多人卡在这一步，写了 counter(section) 却想得到带点号的层级编号，结果全是 1、2、3。
关键不是函数写错，是没理解：多级编号本质是「路径式计数」，counters() 才是专为此设计的。
必须配合 counter-increment 和 counter-reset 使用
CSS 的计数器不是自动递增的变量，它依赖显式声明的两个动作：
-
counter-reset: section—— 在容器上初始化计数器（重置为 0） -
counter-increment: section—— 在目标元素上触发自增（默认 +1）
漏掉任一环节，counter() 或 counters() 都返回空值或 0。常见错误是只在 ol 上设 counter-reset，却忘了给每个 li 加 counter-increment；或者对嵌套 ul 忘了设新的 counter-reset。
立即学习“前端免费学习笔记（深入）”；
示例：二级列表需要两层计数器：
ol { counter-reset: section; }
ol li { counter-increment: section; }
ol li::before { content: counter(section) ". "; }
ol ol { counter-reset: subsection; }
ol ol li { counter-increment: subsection; }
ol ol li::before { content: counters(section, ".") "." counters(subsection, ".") " "; }
counters() 的分隔符和嵌套层级控制
counters() 第二个参数是字符串分隔符（如 "."），但它真正决定层级的是「调用时的 CSS 作用域」——也就是从当前元素向上查找最近的、设置了对应 counter-reset 的祖先元素。
容易被忽略的点：
- 如果某级
ul没有设counter-reset，它不会“自动继承”上一级的计数器名，counters("section", ".")仍只输出一级编号 - 分隔符可以是任意字符串，比如
counters(section, "-")输出1-1-2，但注意不要用空格或斜杠等需转义的字符（除非加引号） - 第三个可选参数
decimal/lower-alpha可统一控制所有层级样式，但不支持每层不同（比如一级数字、二级字母），此时得用多个独立计数器 + 手动拼接
兼容性与真实 DOM 结构限制
counter() 和 counters() 在所有现代浏览器中都稳定支持（包括 IE8+），但有个硬约束：它们只响应 CSS 规则匹配到的元素，无法感知 JS 动态插入的节点是否触发了 counter-increment —— 如果用 JS 添加新 li，必须确保它的样式规则能命中，否则编号会断掉。
另一个现实坑点：语义化 HTML 中，多级列表通常混合 ol 和 ul，但 counter-reset 是按选择器生效的。如果你用 ul ul 设 counter-reset: item，而实际结构是 ol > li > ul，那第二级就根本不会重置计数器。
所以别迷信“自动”，先 inspect 元素，确认每一层的 counter-reset 和 counter-increment 确实应用到了对应节点上 —— 这比调公式重要得多。
