CSS 计数器

下面是关于 CSS 计数器（Counters） 的详尽中文讲解，涵盖定义、属性、常见用法示例及最佳实践，帮助你使用纯 CSS 实现自动编号、生成目录等功能。

---

一、什么是 CSS 计数器？

CSS 计数器是一种纯 CSS 的“变量”机制，可以在样式表里维护一个或多个数值（计数器），通过递增、重置及输出，来实现自动编号、列表续号、生成章节目录等效果，无需额外的 JavaScript。

---

二、核心属性

1. counter-reset

重置一个（或多个）计数器为指定初始值（默认为 0）。

selector {
  counter-reset: name [value];
  /* 可以同时重置多个： counter-reset: a 0 b 5; */
}

• name：计数器名称，自定义。
• value：可选，初始值，若省略则为 0。

2. counter-increment

在匹配元素上对计数器做递增操作（可增可减）。

selector {
  counter-increment: name [value];
  /* 如 counter-increment: section 1; 或 counter-increment: item -1; */
}

• value：可选，每次改变的增量，正数为递增，负数为递减，默认 1。

3. content: counter() / counters()

在生成内容（通常与 ::before 或 ::after 配合）中输出计数器值。

selector::before {
  content: counter(name);
}

selector::before {
  /* 多级编号（如“1.2.3”） */
  content: counters(name, ".") " ";
}

• counter(name)：单级计数器。
• counters(name, “sep”)：多级计数器串联输出，中间用分隔符 sep。

---

三、基本示例：自动编号列表

HTML

<ol class="auto-list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

CSS

.auto-list {
  counter-reset: item; /* 初始化计数器 item 为 0 */
  list-style: none;    /* 去掉默认数字列表样式 */
  padding: 0;
}

.auto-list li {
  counter-increment: item; /* 每个 li 都让 item +1 */
  margin: 0.5em 0;
}

.auto-list li::before {
  content: counter(item) ". "; /* 输出“1. ”、“2. ”… */
  font-weight: bold;
}

效果：无需手动写数字，新增或删除 <li>，编号会自动更新。

---

四、多级编号：章节 & 小节

HTML

<div class="chapter">
  <h2>第一章 标题</h2>
  <h3>1.1 小节</h3>
  <h3>1.2 小节</h3>
</div>
<div class="chapter">
  <h2>第二章 标题</h2>
  <h3>2.1 小节</h3>
</div>

CSS

.chapter {
  counter-reset: section; /* 每个 chapter 重置小节计数器 */
}

.chapter h2 {
  counter-increment: chapter; /* 章号递增 */
  counter-reset: section;     /* 同时可在此重置小节计数器 */
}

.chapter h2::before {
  content: "第 " counter(chapter) " 章 "; /* 输出“第 1 章 ” */
}

.chapter h3 {
  counter-increment: section; /* 小节号递增 */
}

.chapter h3::before {
  content: counter(chapter) "." counter(section) " "; /* 输出“1.1 ” */
}

使用 counter-reset 嵌套在容器上，结合 counter-increment，实现多级编号。

---

五、生成目录（Table of Contents）

可以利用计数器在侧边或顶部动态生成目录样式（纯 CSS 较受限，通常需配合静态 HTML 或预处理器）。

<nav class="toc">
  <h2>目录</h2>
  <ol>
    <li><a href="#sec1">第一章 标题</a></li>
    <li><a href="#sec2.1">第二章 小节</a></li>
    <!-- … -->
  </ol>
</nav>

.toc ol {
  counter-reset: toc; /* 初始化目录计数器 */
  list-style: none;
  padding-left: 1em;
}

.toc li {
  counter-increment: toc;
  margin: 0.3em 0;
}

.toc li::before {
  content: counter(toc) ". ";
  color: #555;
}

由于 CSS 无法“读取”页面中真实标题内容的层级，完整自动目录通常需 JS 或在构建阶段生成，但上述方法可实现简单的有序目录效果。

---

六、注意事项与最佳实践

1. 计数器命名要语义化：如 chapter、section、item、toc，便于维护。
2. 重置位置要准确：通常在容器或每级标题上重置，下一级才能从 0（或指定值）开始。
3. 配合预处理器：在 Sass/LESS 中可封装 mixin，自动注入重置和递增规则，简化多处使用。
4. 兼容性：CSS 计数器自 CSS2 起就被支持，所有主流浏览器均兼容。
5. 纯 CSS 局限：复杂目录或动态内容更新需 JS 或在构建时自动生成。

---

通过以上介绍，你可以利用 CSS 计数器 实现各种自动编号和轻量级目录效果，提升页面的可维护性与一致性。