counter-reset 必须写在父容器上，counter-increment 与 content 必须成对使用；起始编号为1时 counter-reset 应设为0（即省略数值）；嵌套编号需用 counters() 并逐层重置计数器；计数器名区分大小写且不可含空格或点号。
counter-reset 必须写在父容器上，不能写在要编号的元素自身
常见错误是把 counter-reset: item; 直接加在 .card 或 li 上，结果每个元素都重置一次，编号永远是 1。它本质是“划定计数作用域”，就像 JS 里 let i = 0 要写在循环外一样。正确做法是：给包裹所有目标子项的父元素设 counter-reset，比如 .list-container { counter-reset: item; }。
counter-increment 和 content 必须成对出现，缺一不可
只写 counter-increment: item; 不会显示任何数字；只写 content: counter(item); 但没触发递增，会显示 0 或 NaN（取决于浏览器）。实际生效链是：父元素重置 → 子元素递增 → 伪元素用 content 输出。典型组合：
.list-container { counter-reset: item; }.list-item { counter-increment: item; }.list-item::before { content: counter(item) ". "; }
从 1 开始编号时，counter-reset 的初始值别设成 1
很多人误以为 counter-reset: item 1; 就能打出 “1.”，结果第一个显示的是 “2.”。因为 counter-reset 设的是“起始值”，而 counter-increment 每次执行是“先用当前值，再加 1”。所以想显示 1，得让起始值为 0 —— 即 counter-reset: item;（等价于 item 0）。若真要从 5 开始，才写 counter-reset: item 4;。
嵌套编号必须用 counters()，且子级需重置自己的计数器
比如实现 “1.1”“1.2”“2.1”，不能只靠一个 counter()。关键点：
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
counter-reset: chapter;，外层项同时做counter-increment: chapter;和counter-reset: section; - 内层容器设
counter-reset: section;（继承自父级重置，但显式写更安全） - 内层项只做
counter-increment: section; - 内层
::before用content: counters(chapter, ".") "." counter(section);
漏掉任意一层 counter-reset，子级编号就会累加而非重置，比如 “1.1”“1.2”“1.3” 后突然变成 “1.4” 而不是 “2.1”。
最容易被忽略的是：计数器名区分大小写、不能含空格或点号，且一旦拼错，整个链就断掉——浏览器不会报错，只是静默失效。
