以下是一个简单的例子：
HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>CSS 计数器</title>
</head>
<body>
<section>
<h2>章节 1</h2>
<p>这是第一节的内容。</p>
</section>
<section>
<h2>章节 2</h2>
<p>这是第二节的内容。</p>
</section>
</body>
</html>
CSS 样式（styles.css）：
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
section {
counter-reset: chapter; /* 重置计数器 "chapter" */
}
h2::before {
counter-increment: chapter; /* 计数器 "chapter" 自增 */
content: "章节 " counter(chapter) ": "; /* 显示计数器值 */
}
p {
text-indent: 20px;
}
在这个例子中，我们使用了 CSS 计数器来为每个 <section> 元素的 <h2> 子元素创建一个章节标志。counter-reset 属性用于重置计数器的初始值，而 counter-increment 属性用于自增计数器的值。在 ::before 伪元素中，我们使用 counter(chapter) 函数来获取计数器的当前值，并将其显示在内容之前。
这只是一个简单的例子，你可以根据实际需求和设计要求使用 CSS 计数器。它可以用于创建各种标志、编号或标签，为文档内容添加更多的信息。
转载请注明出处：http://www.zyzy.cn/article/detail/12551/CSS