本文详解如何在 Obsidian 中使用 CSS counter-reset 和 counter-increment 实现跨多个 <figure> 元素的连续自动编号，解决因作用域错误导致所有图表均显示为“Fig. 1”的常见问题。
本文详解如何在 obsidian 中使用 css `counter-reset` 和 `counter-increment` 实现跨多个 `
在 Obsidian 中为图表添加自动编号（如 Fig. 1、Fig. 2）是提升学术笔记专业性的实用技巧。但许多用户发现，尽管按标准 CSS 计数器语法编写了样式，所有 <figure> 却始终显示为 Fig. 1——根本原因在于 CSS 计数器的作用域（scope）未被正确定义。
Obsidian 的渲染机制会将每段 Markdown 内容（尤其是内联 HTML）解析为独立 DOM 片段，而非完整 HTML 文档。因此，直接对 body 设置 counter-reset 是无效的：Obsidian 并不以标准 <body> 标签包裹整个笔记内容，该选择器无法命中预期容器，导致计数器每次都在新上下文中被重复初始化。
✅ 正确解法是：显式创建一个局部计数作用域容器，并将其 CSS 规则限定于该容器内。
✅ 推荐实现步骤
- 在笔记中用 <div> 包裹所有图表（推荐类名 figure-container）：
<div class="figure-container">
<figure>
<img src="assets/diagram-1.png" width="300">
<figcaption>系统架构概览</figcaption>
</figure>
<figure>
<img src="assets/diagram-2.png" width="300">
<figcaption>数据流时序图</figcaption>
</figure>
</div>- 在 Obsidian 的 snippets/figure-counter.css（或内联 <style>）中添加以下样式：
.figure-container {
counter-reset: figureCounter;
}
.figure-container figure {
counter-increment: figureCounter;
}
.figure-container figure figcaption::before {
content: "Fig. " counter(figureCounter) ": ";
font-weight: bold;
margin-right: 0.5em;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 使用 ::before（双冒号）而非 :before（单冒号），符合现代 CSS 伪元素规范（Obsidian 1.5+ 基于 Chromium 渲染，推荐双冒号写法）；
- counter-reset 必须作用于包含全部目标 figure 的最近共同父容器，不可设在 body 或 article 等全局标签上；
- 若需在多个独立笔记中复用该功能，建议将上述 CSS 保存为启用的 Snippet（置于 .obsidian/snippets/ 目录），并在设置中开启；
- 避免在 <figure> 外部嵌套其他 counter-reset 元素（如意外的 div { counter-reset: ... }），否则会重置计数。
✅ 进阶：支持多章节独立编号（可选）
若笔记含多个逻辑章节，且希望每章图表从 Fig. 1 重新开始，可为每章使用唯一类名：
<section class="chapter" data-chapter="1">
<h2>第一章：引言</h2>
<div class="figure-container chapter-1">
<figure>...</figure>
</div>
</section>对应 CSS：
.chapter-1 { counter-reset: figureCounter; }
.chapter-1 figure { counter-increment: figureCounter; }
/* 其他章节同理 */总结
Obsidian 中 CSS 计数器失效，本质是作用域缺失所致。通过主动声明容器 + 精确限定选择器范围，即可稳定实现 Fig. 1, Fig. 2, Fig. 3 的递增编号。该方案轻量、无插件依赖、完全兼容 Obsidian 的实时预览与发布流程，是技术笔记与科研写作中值得长期复用的基础排版实践。
