CSS counter() 语法
在 CSS 中，counter() 函数用于获取一个计数器的当前值，并将这个值显示在页面上。
它一般与 CSS 计数器属性（如 counter-increment 和 counter-reset 等）配合使用，用于对列表、章节、标题等进行自动编号。
语法：
content: counter(counter-name, style);说明：
counter() 函数必须与 content 属性一起使用，然后作为伪元素（即 ::before 或 ::after）的内容。
counter() 函数接收以下 2 个参数。
counter-name（必选）：是计数器的名称，由我们自行定义。style（可选）：是计数器的显示样式，支持的取值包括：decimal（1, 2, 3）、upper-roman（I, II, III）、lower-roman（i, ii, iii）、upper-alpha（A, B, C）、lower-alpha（a, b, c）等。
对于 counter() 函数，小伙伴们还要清楚以下几点：
- 计数器可以通过 counter-reset 属性来初始化，可以通过 counter-increment 属性增加或减少值。
- 计数器的作用域由元素的 CSS 层次结构决定，子元素可以继承父元素的计数器。
提示: 如果只是想生成一层计数器，我们只需要使用 counter() 函数即可。如果想要生成多层计数器（如 1.1, 1.2），则需要使用 counters() 函数。
CSS counter() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS counter() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS counter() 函数是如何使用的。
示例 1：counter() 实现基本计数器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "第 " counter(section) " 章：";
}
</style>
</head>
<body>
<h2>开篇</h2>
<h2>主体</h2>
<h2>总结</h2>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们首先使用 counter-reset: section; 初始化一个名为 “section” 的计数器。
然后每次 h2::before 触发时，counter-increment: section; 回将计数器加 1，并通过 content: "第 " counter(section) " 章："; 来将计数器的值插入到标题前，从而生成类似 “第 1 章”、“第 2 章” 这样的效果。
示例 2：counter() 使用不同的计数器样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
counter-reset: chapter;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: chapter;
content: counter(chapter) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(chapter) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>简介</h1>
<h2>这是一个小节</h2>
<h2>这是一个小节</h2>
<h1>主体</h1>
<h2>这是一个小节</h2>
<h2>这是一个小节</h2>
<h2>这是一个小节</h2>
<h1>总结</h1>
<h2>这是一个小节</h2>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们首先定义了两个计数器：chapter 和 subsection。其中，h1 元素重置 subsection 计数器并递增 chapter 计数器，h2 元素递增 subsection 计数器。
通过 content: counter(chapter) "." counter(subsection) " ";，可以生成类似 “1.1”、“1.2”、“2.1” 这样的嵌套编号效果。
示例 3：counters() 实现多级嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
counter-reset: section;
}
ul {
list-style: none;
counter-reset: subsection;
}
li::before {
counter-increment: subsection;
content: counters(subsection, ".") " ";
}
</style>
</head>
<body>
<ul>
<li>选项
<ul>
<li>子项</li>
<li>子项</li>
</ul>
</li>
<li>选项
<ul>
<li>子项</li>
</ul>
</li>
</ul>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 counters(subsection, ".") 来生成多级嵌套的编号（如 1.1、1.2、2.1）。counters() 函数会自动处理嵌套层级的计数器值，适合用于复杂的分层列表或目录结构。
示例 4：counter() 自定义计数器样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
counter-reset: item;
}
li {
list-style: none;
}
li::before {
counter-increment: item;
content: counter(item, upper-roman) ". ";
color: hotpink;
}
</style>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>樱桃</li>
</ul>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 counter(item, upper-roman) 来将计数器显示为大写罗马数字（I, II, III）。这里使用了伪元素（::before），来将计数器值插入到列表项前，并设置颜色为 hotpink，从而实现自定义样式的自动编号列表。
