本文详解如何在 Obsidian 中使用 CSS counter-reset 和 counter-increment 实现跨多个 元素的连续自动编号，解决因作用域错误导致所有图表均显示为“Fig. 1”的常见问题。

本文详解如何在 obsidian 中使用 css `counter-reset` 和 `counter-increment` 实现跨多个 `

` 元素的连续自动编号，解决因作用域错误导致所有图表均显示为“fig. 1”的常见问题。

在 Obsidian 中为图表添加自动编号（如 Fig. 1、Fig. 2）是提升学术笔记专业性的实用技巧。但许多用户发现，尽管按标准 CSS 计数器语法编写了样式，所有

却始终显示为 Fig. 1——根本原因在于 CSS 计数器的作用域（scope）未被正确定义。

Obsidian 的渲染机制会将每段 Markdown 内容（尤其是内联 HTML）解析为独立 DOM 片段，而非完整 HTML 文档。因此，直接对 body 设置 counter-reset 是无效的：Obsidian 并不以标准

标签包裹整个笔记内容，该选择器无法命中预期容器，导致计数器每次都在新上下文中被重复初始化。

✅ 正确解法是：显式创建一个局部计数作用域容器，并将其 CSS 规则限定于该容器内。

✅ 推荐实现步骤

1. 在笔记中用
   包裹所有图表（推荐类名 figure-container）：

   <div class="figure-container">
     <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. 在 Obsidian 的 snippets/figure-counter.css（或内联

   .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/ 目录），并在设置中开启；
   • 避免在

     外部嵌套其他 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 的实时预览与发布流程，是技术笔记与科研写作中值得长期复用的基础排版实践。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！