CSS 计数器（CSS Counters）是一种用于追踪和显示元素数量的技术。通过 counter-reset 和 counter-increment 属性，可以在页面上创建一个可自定义的计数器，常用于编号列表、自动化生成编号、自动编号章节等场景。

1️⃣ CSS 计数器的基本概念

CSS 计数器由两部分组成：

  • counter-reset：重置计数器的值，通常用于定义一个计数器的初始值。
  • counter-increment：增加计数器的值，通常与元素关联。
  • counter()：显示计数器的当前值。

2️⃣ 计数器的基本语法

1. 重置计数器：counter-reset

counter-reset 用于初始化计数器的值。可以在任何元素上定义一个计数器。

/* 初始化计数器 "section" 的值为 0 */
body {
  counter-reset: section;
}

2. 递增计数器：counter-increment

counter-increment 用于增加计数器的值。通常与元素结合使用，当该元素显示时，计数器的值会自动递增。

/* 递增计数器 "section" */
h2 {
  counter-increment: section;
}

3. 显示计数器值：counter()

使用 counter() 函数来显示计数器的当前值，可以将计数器值插入到元素的内容中。

h2::before {
  content: "Section " counter(section) ". ";
}

3️⃣ 创建一个编号列表的例子

使用 CSS 计数器可以轻松地为一个有序列表或自定义结构添加自动编号。

HTML 示例：

<ol>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ol>

CSS 样式：

/* 初始化计数器 */
ol {
  counter-reset: chapter; /* 计数器 "chapter" 的初始值为 0 */
}

/* 列表项递增计数器 */
li {
  counter-increment: chapter; /* 每个列表项都会递增计数器 */
}

/* 在每个列表项前插入计数器的值 */
li::before {
  content: "Chapter " counter(chapter) ": "; /* 显示计数器的值 */
}

结果：

Chapter 1: 第一章
Chapter 2: 第二章
Chapter 3: 第三章

4️⃣ 嵌套计数器的例子

可以使用多个计数器，嵌套的计数器通常用于子元素，如编号列表中的子章节或子项。

HTML 示例：

<ol class="main">
  <li>第一章
    <ol class="sub">
      <li>第一节</li>
      <li>第二节</li>
    </ol>
  </li>
  <li>第二章</li>
</ol>

CSS 样式：

/* 初始化外部和内部计数器 */
.main {
  counter-reset: chapter;
}

.sub {
  counter-reset: section; /* 子列表有一个新的计数器 */
}

/* 外部列表递增 "chapter" 计数器 */
.main > li {
  counter-increment: chapter;
}

/* 内部列表递增 "section" 计数器 */
.sub > li {
  counter-increment: section;
}

/* 外部列表项显示 "chapter" 计数器 */
.main > li::before {
  content: "Chapter " counter(chapter) ". ";
}

/* 内部列表项显示 "section" 计数器 */
.sub > li::before {
  content: "Section " counter(chapter) "." counter(section) ". ";
}

结果：

Chapter 1. 第一章
Section 1.1. 第一节
Section 1.2. 第二节
Chapter 2. 第二章

5️⃣ 计数器的进阶应用

1. 自定义编号样式

使用 counter() 可以实现自定义编号格式，比如使用不同的样式显示计数器值。

/* 自定义编号样式 */
li::before {
  content: "第" counter(chapter) "章";
  font-weight: bold;
  color: #333;
}

2. 递减计数器

CSS 计数器通常是递增的，但是你可以结合 counter-reset 和 counter-increment 来创建递减计数器。为了实现递减效果，你可以在 counter-increment 之前对计数器进行调整。

/* 初始化计数器 */
body {
  counter-reset: section 5; /* 从5开始递减 */
}

/* 递减计数器 */
li {
  counter-increment: section -1; /* 每次递减 1 */
}

/* 显示计数器 */
li::before {
  content: "第" counter(section) "章";
}

3. 结合 counter() 和其他样式

你可以将 counter() 与其他 CSS 样式结合使用，生成更加丰富和动态的内容。

/* 定义一个动态生成的章节编号 */
h3::before {
  content: "第 " counter(chapter) " 章";
  font-size: 20px;
  color: #007BFF;
}

🎯 总结

CSS 计数器非常适合用于生成动态编号、章节编号等场景，帮助开发者减少手动编号的工作量，并使得内容在添加、删除时自动调整。

  • counter-reset：重置计数器的初始值。
  • counter-increment：增加计数器的值。
  • counter()：显示计数器的当前值。
  • CSS 计数器常用于自动编号、列表项的编号和章节编号等场景。
  • 嵌套计数器可以通过不同的计数器来表示多级结构的编号。

CSS 计数器是一个强大的工具，能帮助实现自动化编号和多层级结构的样式化，极大地提高了网页设计和内容管理的灵活性。