counter-reset 在子元素中不生效，根本原因是它只对后续同级或后代中满足作用域条件的 counter-increment 生效，且重置动作不继承、不传播、不穿透伪元素边界。
counter-reset 为什么在子元素里不生效
根本原因是 counter-reset 只对「后续同级或后代中满足作用域条件」的 counter-increment 生效，且重置动作本身**不继承、不传播、不穿透伪元素边界**。常见误判是以为写在父容器上，子元素自动“继承”计数器状态——实际它只初始化一个命名计数器的起始值，且该初始化仅对当前元素的「后代流」有效。
典型错误场景：
- 在
:before伪元素里写counter-reset: section;→ 对外部真实子元素无效 - 父元素设置了
counter-reset: item 0;，但子元素用display: contents;或被contain: layout;截断，导致计数器上下文丢失 - 使用
flex或grid布局时，子项被order重排，但counter-increment仍按 DOM 顺序触发，视觉顺序≠计数顺序
如何确保 counter-reset 在 Chrome/Firefox/Safari 中行为一致
三大浏览器对 counter-reset 的解析基本一致，但 Safari（尤其是 iOS 16.4–17.2）存在一个关键差异：当父元素设为 display: grid; 且子元素含 counter-increment，若父元素未显式设置 counter-reset，Safari 可能忽略首个子项的计数（表现为从 0 而非 1 开始）。修复方式不是加 hack，而是明确作用域锚点：
- 把
counter-reset放在**最外层容器**（如<ol></ol>或自定义<div class="list">），而非中间 wrapper<li>避免在 <code>position: absolute;元素上依赖计数器——它脱离常规文档流，部分旧版 Safari 不触发counter-increment - 对需要独立编号的区块，用唯一计数器名隔离，例如：
counter-reset: step-a; counter-reset: step-b;，而非复用同一名称
用 counter-scope 模拟局部作用域（CSS Nesting + :has 的替代方案）
原生 CSS 没有 counter-scope，但可通过嵌套规则 + 伪类规避跨区域污染。比如你有一组卡片，每张卡内要独立编号「步骤」：
立即学习“前端免费学习笔记（深入）”；
.card {
counter-reset: step;
}
.card .step-item::before {
counter-increment: step;
content: "Step " counter(step) ": ";
}这里的关键是：每个 .card 都执行一次 counter-reset: step;，相当于为每个卡片创建独立计数器实例。注意不要写成：
.card > * { counter-reset: step; } /* 错！重置发生在每个子元素，不是卡片本身 */真正起作用的是「应用 counter-reset 的元素」，它必须是计数器作用域的根节点，且该节点需包含所有要编号的后代。
调试 counter-reset 是否生效的三步检查法
遇到编号错乱或不递增，别急着改 JS，先用 DevTools 快速验证 CSS 计数器状态：
- 选中目标元素 → Elements 面板右键 → Copy → Copy styles，确认
counter-reset和counter-increment是否被覆盖或未计算 - 在 Console 执行
getComputedStyle($0).counterReset（$0 是当前选中元素），看返回值是否为"step 1"类字符串；返回空字符串说明未命中规则 - 临时加一句
* { outline: 1px solid red !important; }，观察哪些元素实际参与了计数流——常发现隐藏的<span></span>或空<div> 意外触发了 <code>counter-increment最容易被忽略的是：计数器名大小写敏感，
counter-reset: Section;和counter-increment: section;完全不匹配；另外，counter-reset: foo -1;是合法的，但若后续counter-increment: foo 2;，第一次增量后值为 1，不是 0——这种偏移量叠加逻辑在复杂列表里极易出错。
