CSS中的计数器（counter）详解

描述
CSS计数器是一种强大的工具，允许开发者通过CSS（而非HTML或JavaScript）自动对元素进行编号，例如生成文档目录、图注编号或步骤指示器。它本质上是由CSS维护和递增的变量。

知识详解

1. 计数器的核心属性
   计数器系统主要依赖三个属性协同工作：

   • counter-reset： 初始化或重置一个或多个计数器。可以设置初始值（默认为0）。
   • counter-increment： 递增一个或多个计数器的值。可以设置递增步长（默认为1）。
   • counter() / counters() 函数： 在 content 属性中调用，以显示计数器的当前值。

2. 基本使用步骤

   步骤一：初始化计数器 (counter-reset)
   你需要在一个父级元素上初始化计数器。这相当于“声明”了一个变量并给了它一个起始值。

   body {
     counter-reset: section; /* 初始化一个名为'section'的计数器，初始值为0 */
   }
   

   你也可以设置特定的初始值：

   body {
     counter-reset: chapter 4; /* 计数器'chapter'从4开始计数 */
   }
   

   步骤二：递增计数器 (counter-increment)
   在你希望计数的元素上递增这个计数器。通常，这会在选择器（如 h2、li）上完成。

   h2 {
     counter-increment: section; /* 每当遇到一个<h2>元素，'section'计数器就+1 */
   }
   

   你也可以指定递增的步长：

   h2 {
     counter-increment: section 2; /* 每次遇到<h2>，计数器+2 */
   }
   

   步骤三：显示计数器 (content + counter())
   最后，使用 content 属性和 counter() 函数来显示计数器的值。这通常在目标元素的伪元素（如 ::before 或 ::after）中完成。

   h2::before {
     content: "Section " counter(section) ": "; /* 显示为 "Section 1: " */
   }
   

   counter() 函数可以接受第二个参数，用于指定数字的样式（如 decimal（十进制，默认）, upper-roman（大写罗马数字）, lower-alpha（小写字母）等）。

   h2::before {
     content: counter(section, upper-roman) ". "; /* 显示为 "I. " */
   }
   

3. 嵌套计数器 (counters())
   对于多级嵌套的列表（如 ol>li>ol>li），counters() 函数非常有用。它能将父级的所有计数器值连接起来。

   步骤一：为每一级列表重置计数器

   ol {
     counter-reset: ordered-list; /* 为每个<ol>元素初始化一个计数器 */
     list-style-type: none; /* 移除默认的列表符号 */
   }
   

   步骤二：递增并显示计数器

   li::before {
     counter-increment: ordered-list; /* 递增计数器 */
     content: counters(ordered-list, ".") " "; /* 使用counters()函数，以'.'作为分隔符 */
   }
   

   • counters(name, string) 函数会生成一个由所有层级同名计数器的当前值组成的字符串，并用指定的 string（如 "."）连接。
   • 例如，一个三级嵌套的列表项会显示为 "1.2.3"。

4. 实战示例：为标题和子标题自动编号

   HTML 结构

   <h1>开始学习CSS计数器</h1>
   <h2>什么是计数器？</h2>
   <h3>counter-reset</h3>
   <h3>counter-increment</h3>
   <h2>如何使用计数器？</h2>
   <h3>基本步骤</h3>
   <h2>高级用法</h2>
   <h3>嵌套计数器</h3>
   

   CSS 代码

   body {
     counter-reset: h2-counter; /* 为h2级别的标题初始化主计数器 */
   }
   
   h2 {
     counter-reset: h3-counter; /* 在每个h2下，为h3级别的子标题重置子计数器 */
     counter-increment: h2-counter; /* 遇到h2，主计数器+1 */
   }
   
   h2::before {
     content: counter(h2-counter) ". "; /* 显示主计数器，如 "1. " */
   }
   
   h3 {
     counter-increment: h3-counter; /* 遇到h3，子计数器+1 */
   }
   
   h3::before {
     content: counter(h2-counter) "." counter(h3-counter) " "; /* 显示为 "主计数器.子计数器"，如 "1.1 " */
   }
   

   最终效果

   • "什么是计数器？" 显示为：1. 什么是计数器？
   • 其下的 "counter-reset" 显示为：1.1 counter-reset
   • "如何使用计数器？" 显示为：2. 如何使用计数器？
   • 其下的 "基本步骤" 显示为：2.1 基本步骤

总结
CSS计数器通过 counter-reset、counter-increment 和 counter()/counters() 的巧妙配合，实现了纯CSS的内容编号。它特别适用于需要动态、结构化编号的场景，增强了样式与内容的分离，是CSS中一项实用且强大的功能。