CSS 计数器
披萨
汉堡包
热狗
CSS 计数器是 CSS 维护的“变量”，其值可以通过 CSS 规则来增加（以跟踪它们被使用了多少次）。计数器允许您根据内容在文档中的位置来调整其外观。
使用计数器自动编号
CSS 计数器就像“变量”。变量的值可以通过 CSS 规则来增加（这将跟踪它们被使用了多少次）。
要使用 CSS 计数器，我们需要使用以下属性：
counter-reset- 创建或重置计数器counter-increment- 增加计数器的值content- 插入生成的内容counter()或counters()函数 - 将计数器的值添加到元素中
要使用 CSS 计数器，必须先使用 counter-reset 创建它。
以下示例为页面创建了一个计数器（在 body 选择器中），然后为每个 <h2> 元素增加计数器的值，并在每个 <h2> 元素前面添加“Section <计数器值>:”。
示例
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
自己动手试一试 »
嵌套计数器
以下示例为页面创建了一个计数器（section），并为每个 <h1> 元素创建了一个计数器（subsection）。“section”计数器将针对每个 <h1> 元素计数，显示“Section <section 计数器值>.”，而“subsection”计数器将针对每个 <h2> 元素计数，显示“<section 计数器值>.<subsection 计数器值>”
示例
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
自己动手试一试 »
计数器在创建嵌套列表时也很有用，因为新实例的计数器会自动为子元素创建。这里我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串。
示例
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
自己动手试一试 »
CSS 计数器属性
| 属性 | 描述 |
|---|---|
| content | 与 ::before 和 ::after 伪元素一起使用，以插入生成的（内容）。 |
| counter-increment | 增加一个或多个计数器的值。 |
| counter-reset | 创建或重置一个或多个计数器。 |
| counter() | 返回命名计数器的当前值。 |
