counter-reset 必须写在真正包裹目标元素的动态容器上，而非 body 或外层；content 语法错误会导致伪元素不渲染；动态插入元素需手动重置父容器计数器；display: contents、position: absolute、contain 等属性会截断计数上下文。
counter-reset 位置错误导致 Safari/Chrome 刷新后编号消失
不是浏览器 bug，而是 counter-reset 没写在「真正起作用的容器」上。很多人在 body 或外层 .wrapper 上设 counter-reset，但 Obsidian、Notion 插件、或某些 SSR 渲染的页面里，内容实际被包裹在动态生成的嵌套容器中（比如 .markdown-preview 或 .cm-content），body 的重置根本没覆盖到目标元素。
刷新后首次渲染时，计数器初始化失败，后续所有 counter-increment 都递增一个未定义的计数器，结果全显示为 0 或空白。
- 检查真实 DOM 结构：右键「检查元素」，往上逐层看哪个父容器真正包住了你的
figure、h3或.step-item - 把
counter-reset: item;明确写在那个容器上，而不是靠「应该能继承」去赌 - Safari（iOS 16.4–17.2）尤其敏感：若最外层是
display: grid但没在它上面设counter-reset，首个子项直接被跳过，刷新后就卡在空或 0
content 规则语法错误让编号“存在但不可见”
counter() 函数本身不报错，但只要 content 声明有语法问题，整条 CSS 规则会被浏览器静默丢弃——你看到的“没编号”，其实是伪元素压根没渲染。
-
content值必须是非空字符串：写成content: "";或content: none;→ 伪元素不创建，counter-increment也不会触发 - 拼接时漏引号：
content: counter(item) ".";✅，但content: counter(item) .;❌（点号没引号）→ 整条规则失效 - 格式关键字不能加引号：
counter(item, lower-roman)✅，counter(item, "lower-roman")❌ - 伪元素用单冒号
:before：部分 Obsidian 版本只认双冒号::before，写错就无输出
动态插入元素后编号不更新，不是刷新问题而是重置缺失
刷新后编号正常，但 JS 插入新 figure 或 h3 后编号卡住？因为 counter-reset 是一次性初始化行为，不监听 DOM 变化。新增元素匹配了 counter-increment，但它的父容器早已完成样式计算，不会自动重跑计数逻辑。
- 不要依赖全局重置：给外层
body或.note-container加counter-reset，对局部动态插入无效 - 每次插入前，对「该批元素的最近公共祖先容器」手动重置：
container.style.counterReset = "figureCounter"; - 或加 class 触发重排：
container.classList.add("reset-counters");，配合 CSS.reset-counters { counter-reset: figureCounter; } - 强制同步布局（稳妥但略重）：
container.offsetHeight;插入后调用一次，确保重排触发重新计数
display 属性意外截断计数上下文
计数器上下文会被某些 CSS 属性静默切断，刷新后表现不稳定——尤其在 flex/grid 容器、position: absolute 或 contain: layout 元素内部，counter-increment 可能完全不生效，或只在部分浏览器中失效。
-
display: contents：父元素消失，后代脱离原始计数流，counter-reset失效 -
position: absolute：脱离常规文档流，旧版 Safari 不触发counter-increment -
contain: layout或contain: paint：明确隔离渲染上下文，计数器无法穿透 -
visibility: hidden：仍会触发counter-increment；但display: none：完全跳过，连初始化都不参与
最容易被忽略的是：计数器不靠「视觉层级」或「DOM 深度」工作，而严格依赖「样式计算时的渲染流路径」。哪怕结构看起来完全一样，只要中间某个容器用了 display: grid 却忘了在它身上写 counter-reset，或者用了 contain: layout 却没意识到它会截断，刷新后就可能出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
