使用CSS计数器
CSS柜台就像是“变量”。 该变量的值可以由CSS规则被递增（这将跟踪它们使用多少次）。
要使用CSS柜台的工作，我们将使用以下属性：
-
counter-reset-创建或重置计数器 -
counter-increment-增加计数器值 -
content-插件生成的内容 -
counter()或counters()函数-一个计数器的值添加到一个元素
要使用CSS计数器，它必须首先用创建counter-reset 。
下面的示例创建了一个页面计数器（在身体选择器），然后递增为每个计数器值<h2>元素，并增加了"Section < value of the counter >:"每个之初<h2>元素：
例
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
试一试» 嵌套计数器
下面的示例创建的页面（部分）一个计数器，并为每一个柜台<h1>元素（款）。 在"section"计数器计数为每个<h1>与元素"Section < value of the section counter >."和"subsection"计数器计数为每个<h2>与元素"< value of the section counter >.< value of the subsection counter >"
例
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 | 用于与前::和:: after伪元素，插入生成的内容 |
| counter-increment | 递增一个或多个计数器的值 |
| counter-reset | 创建或复位一个或多个计数器 |