counter-increment 是 CSS 中用于增加或减少计数器的属性。这个属性通常与 counter-reset 配合使用,用于创建自定义的计数器。

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

/* 示例 */
body {
  counter-reset: section; /* 初始化计数器 */
}

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

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

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


转载请注明出处:http://www.zyzy.cn/article/detail/6058/CSS