ol无法实现跨容器续编、跳号或伪元素定制编号，而CSS计数器通过counter-reset和counter-increment成对使用，支持重置、递增、嵌套及多格式输出，自由度更高。
为什么 ol 不够用，才要上 counter-reset
因为 ol 只能生成连续、嵌套层级固定的序号；一旦需要跨容器续编（比如两段 div 接着编号）、跳号（如从 3 开始）、或把序号塞进伪元素里配合图标/装饰，ol 就束手无策了。CSS 计数器本质是变量，可重置、可递增、可嵌套，自由度高得多。
counter-reset 和 counter-increment 怎么配对写
必须成对出现才有意义：前者声明计数器名并设初值，后者在目标元素上触发加一。常见错误是只写 counter-increment 却没在父级或根上 counter-reset，结果序号全显示为 0 或不显示。
实操要点：
-
counter-reset通常放在列表容器（如section或article）上，值形如counter-reset: step 0—— 名字叫step，起始值是0（注意不是1，因为后面counter-increment会加一次才显示） -
counter-increment放在要编号的每个子项上，如.step-item { counter-increment: step; } - 用
::before+content: counter(step)把数字“印”出来，不能直接写在 HTML 里
怎么让序号带格式，比如 “Step 1”、“第2步”
counter() 函数支持第二个参数指定样式，比手动拼字符串更可靠，也支持本地化。
立即学习“前端免费学习笔记（深入）”；
示例：
content: "Step " counter(step); /* Step 1, Step 2 */ content: counters(step, ".") " "; /* 1.1, 1.2 —— 用于嵌套 */ content: "第" counter(step, decimal) "步"; /* 第1步，第2步 */ content: counter(step, lower-roman) ". "; /* i. ii. iii. */
注意：decimal 是默认值，可省略；但中文前缀如“第…步”必须显式写 decimal，否则可能被浏览器按 locale 解析成其他进制。
容易被忽略的继承与作用域问题
CSS 计数器不是全局变量，它遵循 CSS 作用域规则：子元素会继承父级的计数器状态，但一旦你在子容器又写了一次 counter-reset，就相当于新建一个同名计数器，和外面的断开。
典型踩坑场景：
- 在多个
section里都写counter-reset: step→ 每个 section 都从 1 开始，而非整体延续 - 想做多级编号（如 1.1、1.2、2.1），却只用了一个计数器名 → 必须用
counter-reset: chapter 0 section 0+ 分层counter-increment - 用
display: none隐藏了某个counter-increment元素 → 它仍会触发递增，序号会“空一格”
真要跳过编号，得用 counter-increment: step 0 显式加 0，而不是靠隐藏。
