CSS 计数器
在 CSS 中，计数器（Counters）是一种特殊的功能，允许你在网页上为元素添加自动增加的计数器。这对于制作目录、章节编号或其他需要自动编号的内容非常有用。
使用计数器的基本步骤：
1、定义计数器
使用CSS的 counter-reset 属性来定义一个计数器。这个属性用于为一个或多个元素设置一个或多个计数器的起始值。
.container {
counter-reset: section; /* 定义一个名为 'section' 的计数器 */
}这里我们定义了一个名为 section 的计数器，并将其起始值设置为0。
2、递增计数器
使用 counter-increment 属性来递增计数器的值。通常在 ::before 或 ::after 伪元素中使用。
.section-title::before {
counter-increment: section; /* 递增名为 'section' 的计数器 */
content: counter(section); /* 在伪元素中使用计数器的当前值 */
}这里我们在 .section-title 元素的前面插入一个伪元素，并在其中显示 section 计数器的当前值。
3、应用计数器
在需要使用计数器的元素上，使用 counter() 函数来显示计数器的当前值。
.section-title::before {
content: counter(section); /* 显示 'section' 计数器的当前值 */
}这样就可以将 section 计数器的当前值显示在 .section-title 元素的前面。
示例应用：
假设我们有一个文章的章节，希望每个章节标题前都有自动编号：
<div class="container"> <h2 class="section-title">第一章标题</h2> <p>章节内容...</p> <h2 class="section-title">第二章标题</h2> <p>章节内容...</p> </div>
对应的CSS将是：
.container {
counter-reset: section; /* 定义名为 'section' 的计数器，起始值为0 */
}
.section-title {
counter-increment: section; /* 每次 '.section-title' 出现时，递增 'section' 计数器 */
}
.section-title::before {
content: "第 " counter(section) " 章 "; /* 在每个 '.section-title' 前插入带有计数器当前值的内容 */
}完整代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
counter-reset: section; /* 定义名为 'section' 的计数器，起始值为0 */
}
.section-title {
counter-increment: section; /* 每次 '.section-title' 出现时，递增 'section' 计数器 */
}
.section-title::before {
content: "第 " counter(section) " 章 "; /* 在每个 '.section-title' 前插入带有计数器当前值的内容 */
}
</style>
</head>
<body>
<div class="container">
<h2 class="section-title">第一章标题</h2>
<p>章节内容...</p>
<h2 class="section-title">第二章标题</h2>
<p>章节内容...</p>
</div>
</body>
</html>这样，每个 .section-title 元素前面就会自动显示类似 "第 1 章"、"第 2 章" 的编号。
使用计数器可以使得文档的结构化内容更易于管理和呈现，并减少手动维护编号的工作量。