Obsidian 中 CSS 计数器失效的解决方案：正确实现自动编号图注-html教程-PHP中文网

Obsidian 中 CSS 计数器失效的解决方案：正确实现自动编号图注

在 Obsidian 中使用 CSS counter-reset 和 counter-increment 为自动添加“Fig. 1”“Fig. 2”等编号时，若所有图注均显示为“Fig. 1”，根本原因在于计数器作用域错误——body 在 Obsidian 渲染中并非唯一根容器，需改用自定义 wrapper 元素重置计数器。

在 obsidian 中使用 css `counter-reset` 和 `counter-increment` 为 `

` 自动添加“fig. 1”“fig. 2”等编号时，若所有图注均显示为“fig. 1”，根本原因在于计数器作用域错误——`body` 在 obsidian 渲染中并非唯一根容器，需改用自定义 wrapper 元素重置计数器。

Obsidian 的渲染机制与标准 HTML 页面不同：它将笔记内容注入到一个已存在、且可能包含多个笔记区块的 DOM 环境中。因此，直接在 body 上设置 counter-reset: figureCounter 并不可靠——该样式可能被全局样式覆盖、重复应用，或因 Obsidian 动态加载/预览导致计数器被意外重置。更关键的是，Obsidian 默认不保证每篇笔记独占一个

，实际渲染时笔记内容常嵌套在 .markdown-source-view 或 .markdown-preview-view 等容器内，body 选择器无法精准锚定当前笔记上下文。

✅ 正确做法是为每篇需要编号图注的笔记显式定义一个局部作用域容器，例如

，并将计数逻辑绑定到该容器上：

<div class="figure__wrapper">
  <figure><img src="assets/diagram-1.png"    style="max-width:90%"><figcaption>系统架构概览</figcaption></figure><figure><img src="assets/flow-2.png"    style="max-width:90%"><figcaption>数据处理流程</figcaption></figure>
</div>

对应 CSS 需同步更新，移除对 body 的依赖，改为作用于 .figure__wrapper：

.figure__wrapper {
  counter-reset: figureCounter;
}

.figure__wrapper figure {
  counter-increment: figureCounter;
}

.figure__wrapper figure figcaption::before {
  content: "Fig. " counter(figureCounter) ": ";
  font-weight: bold;
  margin-right: 0.5em;
}

? 注意事项：

必须使用 ::before（双冒号）：这是伪元素的标准写法；单冒号 :before 已过时，在部分 Obsidian 主题或 Strict 模式下可能失效；
确保 CSS 已启用：将上述 CSS 保存至 Obsidian 的 snippets/figure-counter.css，并在「设置 → 外观 → CSS 片段」中启用；
避免跨笔记污染：每个笔记应独立使用自己的 .figure__wrapper；若一篇笔记含多个图区块，仍只需一个 wrapper 包裹全部
；

兼容性增强（可选）：如需支持无

的 figure，可额外添加兜底样式：

.figure__wrapper figure:not(:has(figcaption))::after {
  content: "Fig. " counter(figureCounter);
  display: block;
  font-style: italic;
  margin-top: 0.25em;
}

? 总结：CSS 计数器不是“全局变量”，而是依附于特定块级容器的局部状态。在 Obsidian 这类非标准 HTML 宿主环境中，放弃对 body 的假设，主动创建语义化、作用域明确的 wrapper 元素，是实现稳定、可复用自动编号的唯一可靠路径。