使用 CSS 计数器，让你的数字编号更轻松

2024-02-07 21:17:10

CSS 计数器：让编号变得轻松

在网页设计中，有时我们需要为标题元素、列表项或其他元素自动生成编号列表。传统的方法是使用 HTML 的

CSS 计数器的原理

CSS 计数器属性的工作原理如下：

声明计数器变量 (counter-reset)： 首先，你需要使用 counter-reset 属性来声明一个计数器变量。这个属性接受一个名称和一个初始值，例如：

counter-reset: section-counter 1;

这将创建一个名为 "section-counter" 的计数器变量，并将其初始值设置为 1。

应用计数器样式 (counter-increment)： 接下来，你需要使用 counter-increment 属性来将计数器变量应用到元素上。这个属性接受一个计数器变量的名称，例如：

h2 {
  counter-increment: section-counter;
}

这将使每个 h2 元素的计数器变量 section-counter 增加 1。

显示计数器值 (counter)： 最后，你可以使用 counter 属性来显示计数器变量的值。这个属性接受一个计数器变量的名称和一个显示格式，例如：

h2::before {
  content: "Section " counter(section-counter, decimal);
}

这将在每个 h2 元素之前插入 "Section " 加上 section-counter 变量的值，并以十进制格式显示。

CSS 计数器的实际示例

下面是一个完整的示例，演示如何使用 CSS 计数器为一组标题元素自动生成编号列表：

HTML 代码：

<h1>Chapter 1: Introduction</h1>
<h2>1.1 What is CSS?</h2>
<h2>1.2 Why use CSS?</h2>

<h1>Chapter 2: Basic CSS Syntax</h1>
<h2>2.1 Selectors</h2>
<h2>2.2 Properties</h2>
<h2>2.3 Values</h2>

CSS 代码：

/* 定义计数器变量 */
counter-reset: chapter-counter 1;

/* 将计数器应用到章节标题 */
h1 {
  counter-increment: chapter-counter;
}

/* 将计数器应用到小节标题 */
h2 {
  counter-increment: section-counter;
}

/* 显示计数器值 */
h1::before {
  content: "Chapter " counter(chapter-counter, decimal) ": ";
}

h2::before {
  content: counter(section-counter, decimal) ". ";
}