在 Obsidian 中使用 CSS counter-reset 和 counter-increment 为 元素自动编号时，若所有图号均显示为 “Fig. 1”，根本原因是计数器作用域未正确限定——全局 body 重置在 Obsidian 渲染环境下不可靠，需改用局部容器控制计数范围。
在 obsidian 中使用 css `counter-reset` 和 `counter-increment` 为 `
Obsidian 的实时预览与编辑器渲染机制不同于标准浏览器环境：它并非将整篇笔记作为独立 HTML 文档加载，而是将内容片段动态注入已有 DOM 结构中。因此，直接对 body 设置 counter-reset: figureCounter 会因多个笔记共存、编辑器复用 body 节点等原因导致计数器被反复重置或作用域混乱，最终所有
✅ 正确做法是弃用 body，改用语义化、隔离性强的局部容器（如
）作为计数作用域边界。该容器仅包裹当前笔记中需要编号的图表区块，确保计数器生命周期与内容范围严格一致。
以下是完整可直接使用的解决方案：
1. 在笔记中用容器包裹图表组：
<div class="figure__wrapper"> <figure><img src="assets/diagram-1.png" style="max-width:90%"><figcaption>系统架构概览</figcaption></figure><figure><img src="assets/diagram-2.png" style="max-width:90%"><figcaption>数据流时序图</figcaption></figure> </div>
2. 将以下 CSS 添加至 Obsidian 的 snippets/figure-counter.css（启用后生效）：
.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（双冒号）：CSS 伪元素规范要求现代写法，单冒号 :before 在部分 Obsidian 版本中兼容性不佳；
- 避免嵌套 .figure__wrapper：同一笔记中若存在多个该容器，每个都会独立重置计数器（符合预期）；但嵌套会导致内层重置外层计数，应保持扁平结构；
-
不可省略 ：::before 仅作用于 figcaption 元素，若某 figure 无 figcaption，则不会显示编号，但计数器仍会递增（这是预期行为，保证编号连续性）； - 兼容 Obsidian 主题：上述 CSS 不依赖特定主题变量，适用于所有社区主题（包括 Minimal、Omnispace 等），如需适配深色模式字体颜色，可追加 color: var(--text-normal);。
? 进阶提示：如需跨笔记统一编号（如“第 3 篇笔记中的 Fig. 7”），需借助 Dataview 插件生成动态索引页；而本方案专注单笔记内轻量、零依赖、纯 CSS 的可靠编号，兼顾新手友好性与生产可用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
