counter-reset 是 CSS 中用于重置计数器值的属性。该属性通常与 counter-increment 配合使用，用于创建自定义的计数器。

具体用法如下：
/* 语法 */
counter-reset: none | inherit | initial | <custom-ident> <integer>?;

/* 示例 */
body {
  counter-reset: section; /* 初始化名为 "section" 的计数器，初始值为 0 */
}

h2::before {
  counter-increment: section; /* 每次 h2 元素出现时，增加计数器值 */
  content: "Section " counter(section) ": "; /* 在标题前显示计数器值 */
}

在这个例子中，counter-reset 用于初始化一个名为 "section" 的计数器，初始值为 0。然后，在每个 h2 元素前使用 counter-increment 增加该计数器的值。最后，通过 counter(section) 在伪元素 ::before 中引用计数器的值，并将其显示在标题前。

这样，每当新的 h2 元素出现时，"Section 1"、"Section 2" 等将会被添加到页面上。你可以根据需要自定义计数器的名称和初始值。


转载请注明出处：http://www.pingtaimeng.com/article/detail/6059/CSS