CSS的counter-increment属性用于创建CSS计数器。它允许我们为每个元素指定一个计数器，使我们能够在CSS样式中使用该计数器的值。在此之前，我们需要使用CSS counter-reset属性初始化计数器。
下面是一个使用CSS counter-increment属性的示例，其中每个段落都使用一个计数器，以便为每个段落的编号添加标签：
<!DOCTYPE html>
<html>
<head>
<title>CSS Counter Increment Example</title>
<style>
body {
counter-reset: section;
}
p::before {
counter-increment: section;
content: "Section " counter(section) ": ";
font-weight: bold;
}
</style>
</head>
<body>
<p>This is the first section.</p>
<p>This is the second section.</p>
<p>This is the third section.</p>
</body>
</html>在上面的示例中，我们使用counter-reset属性初始化了一个名为”section”的计数器，然后将counter-increment属性应用于每个段落元素。在::before伪元素中，我们使用counter()函数获取计数器的值，并使用content属性在段落文本前添加标签。最终的输出将是类似于以下内容的内容：
Section 1: This is the first section.
Section 2: This is the second section.
Section 3: This is the third section.需要注意的是，counter()函数可以接受参数，例如用于指定计数器格式的样式字符串。例如，我们可以使用以下样式来指定计数器以字母表示，而不是数字：
counter-style: upper-alpha;这将使计数器以大写字母（A、B、C、D等）而不是数字（1、2、3、4等）进行计数。
正文完