CSS：counter-increment 属性

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.pingtaimeng.com/article/detail/6058/CSS