counter-reset写在::before中无效，必须放在真实元素上；counter()仅在content中生效；display:none仍触发counter-increment；safari对grid容器的counter-reset要求严格。
counter-reset写在::before里根本不起作用
伪元素不是计数器作用域的合法锚点，counter-reset 放在 ::before 或 ::after 中不会初始化任何计数器，也不会影响其父级或兄弟元素的编号逻辑。它会被浏览器静默忽略——不是报错，而是“什么都没发生”。
常见错误写法：.item::before { counter-reset: step; }，意图是让每个 .item 独立编号，但实际效果是：所有 .item 共享同一个未重置的 step 计数器，序号一路累加。
- 正确做法：把
counter-reset: step;写在.item本身（真实 DOM 元素）上，而非其伪元素 - 如果想用伪元素触发计数，只允许用
counter-increment（且必须配合content显示） -
counter-reset在伪元素中设置后，counter()仍可能显示旧值，因为计数器从未被真正重置
content属性缺失导致counter()完全不渲染
counter() 和 counters() 函数只能在 content 属性中生效，且仅限于 ::before 和 ::after 伪元素。脱离这个上下文，函数返回空字符串，不报错也不警告。
典型现象：样式表里写了 .step { counter-increment: step; } 和 .step::before { counter-reset: step; }，但页面上什么数字都不显示——问题不在计数逻辑，而在漏掉了 content。
- 必须显式声明
content: counter(step);或类似表达式，否则计数器值不会输出到渲染树 -
content值不能是空字符串、none或normal；哪怕只是content: "";，也能让伪元素占位，但不会显示数字 - 若用
counters(section, ".")，第二个参数必须是字面量字符串，例如"."，不能是var(--sep)或属性值
display: none 元素仍触发 counter-increment，但 content 不显示
counter-increment 是渲染流程早期触发的声明式行为，它不依赖元素是否可见。即使元素设了 display: none，只要它存在于 DOM 且匹配选择器，就会执行递增——但它的伪元素不会渲染，content 自然为空。
这常导致“序号跳变”：比如列表中第 3 项 display: none，第 4 项的 counter(step) 显示为 4，而不是 3，因为第 3 项已悄悄把计数器加了 1。
-
visibility: hidden不会触发counter-increment，适合做“占位但不计数”的场景 - 动态插入新元素后，若没重排或重绘，
counter-increment不会补触发——这不是 bug，是 CSS 计数器的设计前提：它基于初始样式计算，非响应式 - 修复动态插入后的编号断裂，最稳方式是给容器加
counter-reset再全量重触子项的counter-increment，而非依赖 JS 模拟
Safari iOS 16.4–17.2 对 grid 容器的 counter-reset 特别敏感
当最外层容器是 display: grid，且未在该容器上显式设置 counter-reset，Safari（尤其是 iOS 16.4–17.2）可能跳过首个子项的 counter-increment，表现为序号从 0 开始，或第一项无编号。
这不是兼容性 fallback 问题，而是 Safari 对计数器作用域边界的解析更严格：它要求 counter-reset 必须落在“直接参与文档流并承载子项计数逻辑”的容器上，而 display: grid 容器若没显式重置，就被视为未开启计数上下文。
- 不要把
counter-reset放在.wrapper这类中间布局层，而要放在真正包裹编号项的容器上（如.steps、.chapters） - 避免用
contain: layout或position: absolute截断计数器上下文，它们会让 Safari 彻底丢失计数链 - 嵌套编号时，每一层都必须有对应名称的
counter-reset，漏掉任意一层（比如父级有counter-reset: section，但忘了给子节加counter-reset: subsection），counters()就会退化为单层数字
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
