CSS counter-increment 属性

counter-increment 属性用于增加或减少一个元素的计数器值。它可以与 counter-reset 属性一起使用来创建自定义计数器。

语法

counter-increment: <name> <number> | none;

• <name>：指定要增加或减少计数器的名称。
• <number>：指定要增加或减少计数器的值。
• none：表示不改变计数器的值。

示例

// www.javascriptcn.com code example
/* 在每个段落前增加计数器值 */
p {
  counter-increment: paragraph;
}

/* 在每个标题前增加计数器值 */
h2 {
  counter-increment: section;
}

/* 在每个列表项前增加计数器值 */
li {
  counter-increment: list-item;
}

/* 在每个表格行前增加计数器值 */
tr {
  counter-increment: row;
}

在上面的示例中，我们定义了不同元素的计数器名称，并使用 counter-increment 属性来增加相应的计数器值。这样可以在文档中创建自定义的计数器，并根据需要对其进行操作。

注意事项

• 使用 counter-increment 属性时，需要先定义相应的计数器名称，可以使用 counter-reset 属性来初始化计数器值。
• 计数器值可以为负数，表示减少计数器值。
• 可以在伪元素中使用 counter-increment 属性来应用计数器样式。

counter-increment 属性是 CSS 中一个非常有用的功能，可以帮助我们在文档中实现一些复杂的计数器逻辑。通过合理地使用 counter-increment 属性，可以让页面内容更加丰富和有趣。