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.zyzy.cn/article/detail/6059/CSS