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

在 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 的渲染引擎（基于 CodeMirror + 基于 DOM 的预览层）并不会将你的笔记内容直接注入标准 HTML

中；相反，它会将 Markdown 解析后的内容嵌入一个动态生成的、带特定 class（如 .markdown-source-view 或 .cm-content）的容器内。因此，你在 CSS 中写 body { counter-reset: figureCounter; } 实际上从未生效——因为该样式作用于页面顶层，而你的

元素位于 Obsidian 内部的嵌套容器中，脱离了该计数器的作用域。

✅ 正确解法：用语义化 wrapper 元素显式定义计数上下文
为确保计数器仅在当前笔记（或某一段落）内独立、连续计数，应引入一个轻量级容器（如

），并在其上初始化计数器：

<div class="figure-group">
  <figure><img src="assets/diagram-1.png"    style="max-width:90%" alt="系统架构图"><figcaption>整体数据流架构</figcaption></figure><figure><img src="assets/diagram-2.png"    style="max-width:90%" alt="组件交互图"><figcaption>模块间调用关系</figcaption></figure>
</div>

对应 CSS 需完全绑定到该 wrapper，避免任何对 body 或全局选择器的依赖：

.figure-group {
  counter-reset: figureCounter;
}

.figure-group figure {
  counter-increment: figureCounter;
}

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

? 关键注意事项：

必须使用 ::before（双冒号）：这是 CSS 伪元素的标准写法，单冒号 :before 已废弃（虽部分浏览器兼容，但 Obsidian 的渲染器更严格）；
不要省略单位：counter() 函数返回纯数字，需手动添加空格与标点（如 "Fig. " counter(figureCounter) ": "），否则会紧贴显示为 Fig.1:；
作用域隔离：每个 .figure-group 独立计数。若需跨多段落统一编号，可将所有
包裹在同一个 wrapper 内；若需分章节编号（如 “Fig. 2.1”, “Fig. 2.2”），则需结合嵌套计数器或 JavaScript 扩展；
兼容性提示：Obsidian 默认启用 CSS Snippets，确保该样式已保存为 .css 文件并启用（设置 → 外观 → CSS snippets）；
替代方案提醒：若需更强大功能（如自动提取标题、支持 LaTeX 引用、导出 PDF 编号保留），建议搭配社区插件如 Figcaption 或 Dataview + 自定义元数据实现。