counter-increment 属性将一个或多个 CSS 计数器的值递增/递减给定值。默认增量为 1。
属性值
<custom-ident>: 计数器的名称。名称可以是任何字符串值。
<integer>: （可选）每次元素出现在文档中时定义指定计数器的增量。该增量可以为零，甚至负数。如果未提供整数，则计数器增加 1。
none: 不执行增量。
语法
counter-increment: <counter-name> <integer> ; 适用范围
所有 HTML 元素。
CSS counter-increment: <custom-ident>
这里是一个示例演示反增量
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML 教程</h1>
<h2>HTML 教程</h2>
<h2>XHTML 教程</h2>
<h2>CSS 教程</h2>
<h1>Scripting 教程</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
</body>
</html> CSS counter-increment: <custom-ident> 和 <integer>
这里是演示反增量的示例。 counter-increment 属性应用于 h1::before 选择器。对于每个 h1 元素，它会将 head-counter 计数器的值增加 2。
<html>
<head>
<style>
body {
counter-reset: head-counter;
}
h1::before {
counter-increment: head-counter 2;
content: "Counter: " counter(head-counter) ": ";
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h1>Heading 2</h1>
<h1>Heading 3</h1>
<h1>Heading 4</h1>
<p>上面的例子展示了计数器增量的用法.<p></p>
</body>
</html>