CSS 计数器
比萨
汉堡包
热狗
CSS 计数器是 CSS 维护的“变量”，其值可以根据 CSS 规则增加（以跟踪其使用次数）。计数器可让您根据内容在文档中的位置调整其外观。
使用计数器自动编号
CSS 计数器就像“变量”。变量值可以通过 CSS 规则增加（将跟踪变量使用的次数）。
为了使用 CSS 计数器，我们将使用以下属性：
counter-reset- 创建或重置计数器counter-increment- 增加计数器值content- 插入生成的内容counter()或者counters()函数 - 将计数器的值添加到元素
要使用 CSS 计数器，必须先使用以下方法创建 counter-reset.
以下示例为页面创建一个计数器（在主体选择器中），然后为每个页面增加计数器值<h2>元素并添加“部分计数器的值 >:" 到每个开头<h2>元素：
嵌套计数器
以下示例为页面（部分）创建一个计数器，并为每个<h1>元素（子节）。“节”计数器将为每个元素计数<h1>元素与“部分节计数器的值 >。”，并且将为每个“子部分”计数<h2>元素与“节计数器的值>.<子段计数器的值>":
例子
身体 {
计数器复位：部分；
}
h1 {
反重置：小节；
}
h1::之前 {
计数器增量：部分；
内容：“第“ 计数器（section）””。 “；
}
h2::之前 {
计数器增量：小节；
内容：计数器（部分）“。” 计数器（小节）“ “；
}
亲自尝试 »
计数器还可用于制作大纲列表，因为计数器的新实例会自动在子元素中创建。这里我们使用 counters() 函数在不同级别的嵌套计数器之间插入字符串：
CSS 计数器属性
| 财产 | 描述 |
|---|---|
| 内容 | 与 ::before 和 ::after 伪元素一起使用，插入生成的内容 |
| 反增 | 增加一个或多个计数器值 |
| 反复位 | 创建或重置一个或多个计数器 |
| 柜台（） | 返回指定计数器的当前值 |
