CSS 计数器
披萨
汉堡
热狗
CSS 计数器是 CSS 中维护的“变量”，其值可以通过 CSS 规则递增（以跟踪它们的使用次数）。计数器允许您根据内容在文档中的位置调整其外观。
使用计数器自动编号
CSS 计数器就像“变量”。变量的值可以通过 CSS 规则递增（这将跟踪它们的使用次数）。
为了使用 CSS 计数器，我们将使用以下属性
counter-reset- 创建或重置计数器counter-increment- 递增计数器值content- 插入生成的文本counter()或counters()函数 - 将计数器的值添加到元素
要使用 CSS 计数器，必须首先使用 counter-reset 创建它。
以下示例为页面（在 body 选择器中）创建一个计数器，然后为每个 <h2> 元素递增计数器值，并将“第 <计数器值> 节：”添加到每个 <h2> 元素的开头
示例
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "第 " counter(section) " 节： ";
}
自己尝试 »
嵌套计数器
以下示例为页面（section）创建一个计数器，并为每个 <h1> 元素（subsection）创建一个计数器。“section”计数器将为每个 <h1> 元素计数，显示“第 <section 计数器值> 节.”，而“subsection”计数器将为每个 <h2> 元素计数，显示“<section 计数器值>.<subsection 计数器值>”。
示例
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "第 " 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() | 返回命名计数器的当前值 |
