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 tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</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>The above example shows the usage of counter increment.<p></p>
</body>
</html>
