CSS counter-reset 属性

counter-reset 属性用于重置一个或多个计数器的值。计数器可以用于创建自定义的列表或编号，通过使用 counter-reset 属性，我们可以控制计数器的起始值。

语法

counter-reset: counter-name initial-value;

• counter-name：指定要重置的计数器的名称，可以是任意字符串。
• initial-value：指定计数器的初始值。

示例

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter Reset Example</title>
<style>
  body {
    counter-reset: section;
  }

  h1::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
  }
</style>
</head>
<body>
  <h1>Introduction</h1>
  <h1>Chapter 1</h1>
  <h1>Chapter 2</h1>
</body>
</html>

在上面的示例中，我们定义了一个计数器 section，并将其初始值设置为 0。然后在每个 <h1> 标签前面插入了一个内容为 "Section X: " 的计数器，其中 X 是当前计数器的值。

通过使用 counter-reset 属性，我们可以很容易地自定义计数器的起始值，从而实现更灵活的列表或编号效果。