counter-reset需在父容器（如section、ol）上显式初始化计数器并设起始值，如counter-reset: section 0；默认为0，首个counter-increment后显示1；可同时重置多个计数器，且每个独立作用域。
counter-reset 怎么初始化计数器
counter-reset 用来定义一个计数器的起始值，它本身不显示任何内容，只是为后续的 counter-increment 和 counter() 打基础。常见错误是把它写在要编号的元素上却忘了配合 content 或没设作用域。
- 必须用在某个父容器上（比如
ol、section或自定义div），否则子元素无法继承该计数器作用域 - 默认起始值是
0，不是1；写成counter-reset: my-counter 1才会让第一个counter-increment后显示1 - 可同时重置多个计数器：
counter-reset: section 0 figure 0 - 如果父元素被重复使用（比如多个
article），每个都应有自己的counter-reset，否则计数会累加跨块
counter-increment 怎么触发递增
counter-increment 决定哪个元素“算一次”，但它也不直接显示数字——只是让计数器加一。很多人卡在这步，写了 counter-increment 却没看到编号，因为漏了 content 插入。
- 每次匹配到该 CSS 规则的元素都会使对应计数器加一，不管是否可见（
display: none的元素也会触发） - 支持偏移量：
counter-increment: step 2表示每次加2；负值也合法，如-1 - 可叠加多个：
counter-increment: chapter 1 section 1 - 它只影响自身及后代中用到的
counter()，不影响兄弟元素的计数器作用域
怎么用 counter() 显示编号
counter() 是真正把数字“印出来”的函数，必须配合 ::before 或 ::after 的 content 属性使用。单独写 counter(my-counter) 在其他属性里（比如 color）完全无效。
- 基本写法：
content: counter(my-counter) ". " - 第二个参数可指定进制：
counter(item, lower-roman)→i, ii, iii...；支持decimal、upper-alpha、lower-greek等 - 多级嵌套要用
counters()，比如counters(section, ".")，否则子级只会显示自身值，不带父级前缀 - 注意空格和标点要写在引号里：
content: "§" counter(section)，而不是靠 margin 或 padding 挤
为什么编号错乱或从 0 开始
最常遇到的不是语法错，而是作用域和执行顺序理解偏差。CSS 计数器是“渲染时按 DOM 顺序计算”的，不是声明顺序。
- 父容器没设
counter-reset，子元素的counter-increment会沿 DOM 向上找最近的有效重置，可能跨出预期范围 - 用
display: none隐藏了某些触发元素，但counter-increment仍生效，导致编号跳变 - 在 Flex/Grid 容器中，DOM 顺序和视觉顺序不一致时，编号仍按 HTML 结构走，不是按屏幕位置
- 动态插入元素（如 JS append）后，浏览器会重新计算计数器，但不会自动 reflow 已存在的
content，需确保插入逻辑与样式规则匹配
复杂点在于：计数器没有“重置监听”机制，也没有 API 可读当前值。一旦结构嵌套深、条件多，就容易变成靠反复刷新 + DevTools 的 Computed 面板肉眼调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
