什么是 CSS 计数器，以及如何使用它？

CSS计数器是CSS中的一种功能，它允许我们在HTML文档中创建自动计数的系统。这通常用于生成诸如有序列表、章节号、标题编号等连续的数字标记。通过使用CSS计数器，我们可以避免手动标记每一个编号，同时保持内容的动态更新，特别是在文档结构变化时（比如添加或删除章节）。

使用CSS计数器的步骤：

1. 初始化计数器： 使用counter-reset属性来创建或重置计数器。这通常在父容器上设置，如一个列表或文章的容器。例如：

   css
   body {
     counter-reset: section;  /* 创建名为'section'的计数器，并初始化为0 */
   }

2. 递增计数器： 使用counter-increment属性来递增计数器的值。这通常在你希望计数发生的元素上设置，比如章节的标题。

   css
   h1 {
     counter-increment: section;  /* 每次h1出现时，'section'计数器加1 */
   }

3. 展示计数器： 使用counter()或counters()函数在内容中显示计数器的值。counter()用于单一层级的计数，而counters()适用于嵌套计数（可以显示如1.2.1这样的多级编号）。

   css
   h1:before {
     content: "Section " counter(section) ". "; /* 在标题前添加'章节号' */
   }

实例应用：

假设你有一个文档，里面有多个章节（用<h1>标签表示），每个章节下有多个小节（用<h2>标签表示），你希望自动编号这些章节和小节。

HTML结构示例：

html
<article>
  <h1>Introduction</h1>
  <h2>Background</h2>
  <h2>Current Status</h2>
  <h1>Methodology</h1>
  <h2>Sampling</h2>
  <h2>Data Collection</h2>
</article>

CSS样式示例：

css
body {
  counter-reset: section;  /* 初始化章节计数器 */
}
h1 {
  counter-reset: subsection;  /* 每个新章节重置小节计数器 */
  counter-increment: section;  /* 章节计数 */
}
h2 {
  counter-increment: subsection;  /* 小节计数 */
}
h1:before {
  content: "Chapter " counter(section) ". ";  /* 显示章节编号 */
}
h2:before {
  content: counter(section) "." counter(subsection) " ";  /* 显示小节编号，如1.1, 1.2等 */
}

通过这种方式，每个<h1>和<h2>标签会自动添加相应的章节和小节编号，而无需手动编辑HTML文档，使得文档的维护和更新更加高效和简单。