CSS 计数器
03-css2026/11/14
CSS 计数器是一种 通过 CSS 对元素进行自动编号的机制。
- 适合用于列表、章节标题、序号等场景
- 无需在 HTML 中手动添加数字
- 纯 CSS 就可以实现递增编号
基本用法
CSS 计数器主要使用三个属性：
| 属性 | 说明 |
|---|---|
counter-reset | 初始化计数器 |
counter-increment | 递增计数器 |
content | 在 ::before 或 ::after 中显示计数器 |
基本计数器
1. 简单数字计数器
<h2>Introduction</h2>
<p>This is the introduction section.</p>
<h2>Methods</h2>
<p>This is the methods section.</p>
<h2>Results</h2>
<p>This is the results section.</p>
/* 初始化计数器 */
body {
counter-reset: section; /* 创建名为 section 的计数器 */
}
/* 每次遇到 h2 时递增计数器 */
h2 {
counter-increment: section; /* 递增 section 计数器 */
}
/* 在 h2 前显示计数器 */
h2::before {
content: "Section " counter(section) ": ";
color: #3182ce;
font-weight: bold;
}
效果：
Section 1: Introduction
This is the introduction section.
Section 2: Methods
This is the methods section.
Section 3: Results
This is the results section.
2. 自定义起始值和步长
body {
counter-reset: chapter 5; /* 从 5 开始计数 */
}
h1 {
counter-increment: chapter 2; /* 每次递增 2 */
}
h1::before {
content: "Chapter " counter(chapter) ": ";
}
嵌套计数器
嵌套计数器非常适合多级列表和目录结构。
1. 多级章节编号
<div class="part">Getting Started</div>
<div class="chapter">Introduction</div>
<div class="section">Overview</div>
<div class="section">Requirements</div>
<div class="chapter">Installation</div>
<div class="section">Step by Step</div>
<div class="section">Troubleshooting</div>
<div class="part">Advanced Topics</div>
<div class="chapter">Configuration</div>
/* 初始化各级计数器 */
body {
counter-reset: part chapter section;
}
.part {
counter-reset: chapter; /* 遇到 part 时重置 chapter */
counter-increment: part;
}
.part::before {
content: "Part " counter(part) ": ";
font-size: 1.5em;
color: #e53e3e;
}
.chapter {
counter-reset: section; /* 遇到 chapter 时重置 section */
counter-increment: chapter;
margin-left: 20px;
}
.chapter::before {
content: counter(part) "." counter(chapter) " ";
font-weight: bold;
color: #3182ce;
}
.section {
counter-increment: section;
margin-left: 40px;
}
.section::before {
content: counter(part) "." counter(chapter) "." counter(section) " ";
color: #38a169;
}