CSS `counter-reset` 与 `counter-increment` 复杂列表

CSS Counter：玩转数字的艺术，打造个性化列表

各位看官，咱们今天来聊聊 CSS 中一对儿有趣的“计数器”搭档：counter-reset 和 counter-increment。别看它们名字听起来有点学术，其实用起来就像玩乐高积木一样，只要掌握了基本规则，就能搭建出各种各样、个性十足的列表。

想象一下，你厌倦了千篇一律的数字列表，想要来点不一样的东西。比如，给每个列表项加上章节序号，或者用罗马数字、希腊字母，甚至是自定义的符号来排序。这时候，counter-reset 和 counter-increment 就能派上大用场了。它们就像两位魔术师，一个负责设定计数器的初始值，另一个负责让计数器按你的意愿增长，最终呈现出你想要的列表样式。

计数器的“出生”：counter-reset

counter-reset 的作用就像给计数器“开户”。你需要给它起个名字，并设定一个初始值。这个名字随意发挥，只要符合 CSS 的命名规范就行。初始值默认为 0，如果你想从其他数字开始，也可以自由设定。

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

/* 声明一个名为 "page" 的计数器，初始值为 1 */
.article {
  counter-reset: page 1;
}

上面的代码就像在说：“嘿，浏览器，给我创建一个叫做 ‘section’ 的计数器，从 0 开始计数。然后再创建一个叫做 ‘page’ 的计数器，从 1 开始计数！”。

需要注意的是，counter-reset 通常放在列表容器的父元素上，这样计数器才能在整个列表中生效。就好比你要管理一个团队的工资，肯定要把工资账户开在公司名下，而不是每个员工自己开一个。

计数器的“成长”：counter-increment

有了计数器，总得让它动起来吧？counter-increment 的作用就是让计数器“增长”。你需要在每个列表项上使用 counter-increment，指定要增加哪个计数器，以及每次增加多少。默认情况下，每次增加 1。

/* 每出现一个 h2 标题，就让 "section" 计数器增加 1 */
h2 {
  counter-increment: section;
}

/* 每出现一个 p 元素，就让 "page" 计数器增加 2 */
p {
  counter-increment: page 2;
}

这段代码的意思是：“每当遇到一个 h2 标题，就让 ‘section’ 计数器加 1。每当遇到一个 p 元素，就让 ‘page’ 计数器加 2！”。

需要注意的是，counter-increment 通常放在列表项元素上，这样才能在每个列表项中递增计数器。这就像给每个员工发工资，肯定要发到每个员工的银行卡上。

计数器的“展示”：content 和 counter()

光有计数器还不行，你还得把它显示出来才行啊！content 属性配合 counter() 函数，就能把计数器的值插入到元素的内容中。

/* 在每个 h2 标题前，显示 "Section X: "，其中 X 是 "section" 计数器的值 */
h2::before {
  content: "Section " counter(section) ": ";
}

/* 在每个 p 元素前，显示 "Page [Y]"，其中 Y 是 "page" 计数器的值，并用罗马数字表示 */
p::before {
  content: "Page [" counter(page, upper-roman) "] ";
}

这段代码的意思是：“在每个 h2 标题前面，加上 ‘Section ‘ 字符串，然后显示 ‘section’ 计数器的值，最后加上 ‘: ‘ 字符串。在每个 p 元素前面，加上 ‘Page [‘ 字符串，然后显示 ‘page’ 计数器的值，并用大写罗马数字表示，最后加上 ‘] ‘ 字符串。”。

counter() 函数的第二个参数可以指定计数器的显示格式，常用的格式有：

• decimal：十进制数字 (默认)
• lower-roman：小写罗马数字 (i, ii, iii, iv, v…)
• upper-roman：大写罗马数字 (I, II, III, IV, V…)
• lower-alpha：小写字母 (a, b, c, d, e…)
• upper-alpha：大写字母 (A, B, C, D, E…)
• lower-greek：小写希腊字母 (α, β, γ, δ, ε…)
• cjk-decimal：中文数字 (一, 二, 三, 四, 五…)

你可以根据自己的喜好，选择不同的格式来展示计数器的值。

复杂列表的“魔术”：嵌套计数器

好了，掌握了基本用法，咱们来玩点更高级的：嵌套计数器。想象一下，你想要创建一个多级列表，比如章节、小节、小节的子项等等。这时候，就需要用到嵌套计数器了。

嵌套计数器的原理很简单：在父级计数器的基础上，再创建子级计数器。就像盖房子一样，先打好地基，再一层一层往上盖。

<ol class="chapter">
  <li>
    <h2>Chapter 1: Introduction</h2>
    <ol class="section">
      <li>
        <h3>Section 1.1: Overview</h3>
        <p>This is the overview of section 1.1.</p>
      </li>
      <li>
        <h3>Section 1.2: Background</h3>
        <p>This is the background of section 1.2.</p>
      </li>
    </ol>
  </li>
  <li>
    <h2>Chapter 2: Methodology</h2>
    <ol class="section">
      <li>
        <h3>Section 2.1: Data Collection</h3>
        <p>This is the data collection of section 2.1.</p>
      </li>
      <li>
        <h3>Section 2.2: Analysis</h3>
        <p>This is the analysis of section 2.2.</p>
      </li>
    </ol>
  </li>
</ol>

/* 初始化章节计数器 */
.chapter {
  counter-reset: chapter;
  list-style: none; /* 去掉默认的列表样式 */
}

/* 章节递增 */
.chapter > li {
  counter-increment: chapter;
}

/* 显示章节序号 */
.chapter > li > h2::before {
  content: "Chapter " counter(chapter) ": ";
}

/* 初始化小节计数器，依赖于章节计数器 */
.section {
  counter-reset: section;
  list-style: none; /* 去掉默认的列表样式 */
}

/* 小节递增 */
.section > li {
  counter-increment: section;
}

/* 显示小节序号，包含章节序号 */
.section > li > h3::before {
  content: counter(chapter) "." counter(section) ": ";
}

这段代码实现了以下效果：

• 每个章节标题前面显示 "Chapter X: "，其中 X 是章节序号。
• 每个小节标题前面显示 "X.Y: "，其中 X 是章节序号，Y 是小节序号。

关键在于，我们在 .chapter 元素上初始化了 chapter 计数器，然后在 .section 元素上初始化了 section 计数器。这样，每个小节的序号就能依赖于其所属的章节序号。

你可以根据自己的需求，创建更多层级的嵌套计数器，打造出更复杂的列表结构。比如，你可以再添加一个子节计数器，让标题显示 "X.Y.Z: "。

计数器的“艺术”：自定义样式

除了使用预定义的格式，你还可以自定义计数器的样式，让列表更加个性化。比如，你可以使用图片、符号，甚至是文字来表示计数器的值。

/* 使用自定义的符号表示计数器的值 */
ol {
  counter-reset: item;
  list-style: none;
}

li::before {
  counter-increment: item;
  content: "★ " counter(item) " "; /* 使用星星符号 */
}

/* 使用图片表示计数器的值 */
ol.image-counter {
  counter-reset: image-item;
  list-style: none;
}

ol.image-counter li::before {
  counter-increment: image-item;
  content: url("image-" counter(image-item) ".png") " "; /* 使用图片 */
}

上面的代码展示了两种自定义计数器样式的方法：

• 使用符号：你可以使用任何 Unicode 符号来表示计数器的值。
• 使用图片：你可以使用图片来表示计数器的值。你需要准备一系列图片，并按照计数器的值来命名，比如 "image-1.png"、"image-2.png"、"image-3.png" 等等。

发挥你的想象力，你可以创造出各种各样的计数器样式，让你的列表与众不同。

总结

counter-reset 和 counter-increment 是一对强大的 CSS 属性，它们可以让你轻松地创建各种各样、个性十足的列表。掌握了它们，你就掌握了玩转数字的艺术，可以随心所欲地打造列表的样式。

记住，counter-reset 负责初始化计数器，counter-increment 负责递增计数器，content 和 counter() 负责显示计数器的值。通过嵌套计数器，你可以创建多级列表。通过自定义样式，你可以让列表更加个性化。

好了，各位看官，今天的分享就到这里。希望你能从中学到一些有用的东西，并在实际项目中灵活运用 counter-reset 和 counter-increment，打造出令人惊艳的列表效果！ 祝大家编码愉快！