counter-increment
counter-increment CSS 属性可用于按指定值增加或减少命名CSS 计数器的值，或阻止所有计数器或单个计数器的值被更改。
如果空格分隔的计数器和值列表中命名的计数器不存在，则会创建它。如果列表中计数器没有提供值，则计数器将增加 1。
计数器的值可以使用 counter-reset CSS 属性重置为任何整数值。
试一试
counter-increment: example-counter;
counter-increment: example-counter 0;
counter-increment: example-counter 5;
counter-increment: example-counter -5;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">Counter value:</div>
</section>
#default-example {
text-align: left;
counter-reset: example-counter;
}
#example-element::after {
content: counter(example-counter);
}
语法
/* Increases "my-counter" by 1 */
counter-increment: my-counter;
/* Decreases "my-counter" by 1 */
counter-increment: my-counter -1;
/* Increases "counter1" by 1 and decreases "counter2" by 4 */
counter-increment: counter1 counter2 -4;
/* Increases "page" by 1, "section" by 2, while "chapter" doesn't change */
counter-increment: chapter 0 section 2 page;
/* Do not increment/decrement anything: used to override less specific rules */
counter-increment: none;
/* Global values */
counter-increment: inherit;
counter-increment: initial;
counter-increment: revert;
counter-increment: revert-layer;
counter-increment: unset;
值
counter-increment 属性的值可以是作为 <custom-ident> 指定的空格分隔的计数器名称列表，带有可选的 <integer> 值，或关键字 none。你可以指定任意数量的计数器来递增，每个名称或名称-数字对用空格分隔。
<custom-ident>-
指定要增加或减少的计数器名称。
<integer>-
指定要添加到计数器的值。如果整数前面有
-符号，则该值将从计数器中减去。如果未指定值，则默认为1。 none-
指示不应增加或减少任何计数器。此值还可用于在更具体的规则中取消所有计数器的增加或减少。这是属性的默认值。
注意：使用 none 值会阻止所选元素（应用此规则）的所有计数器增加或减少。要仅阻止特定计数器增加或减少，请将相关计数器的 integer 值设置为 0。
正式定义
正式语法
counter-increment =
[ <counter-name> <integer>? ]+ |
none
示例
减少计数器值
在此示例中，我们显示一个倒数序列。为此，我们使用一个计数器来显示从 100 开始的数字，每次递减 7。
HTML
<div>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i
><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
CSS
我们使用 counter-reset 将名为 sevens 的计数器的初始值设置为 100。然后，对于每个 <i>，我们将计数器减去 7。
要将第一个计数设置为 100，我们使用 :first-of-type 伪类并设置 counter-increment: none; 来定位第一个 <i> 元素。此外，content 属性在 ::before 伪元素中使用，以使用 counter() 函数显示计数器的值。
div {
counter-reset: sevens 100;
}
i {
counter-increment: sevens -7;
}
i:first-of-type {
counter-increment: none;
}
i::before {
content: counter(sevens);
}
结果
如果我们没有使用 counter-reset（或 counter-set）来创建计数器并将值设置为 100，则 sevens 计数器仍然会被创建，但初始值为 0。
规范
| 规范 |
|---|
| CSS 列表与计数器模块第 3 级 # 递增-设置 |
浏览器兼容性
加载中…
另见
- 计数器属性：
counter-set、counter-reset - 计数器 at-rule：
@counter-style - 计数器函数：
counter()、counters() - 使用 CSS 计数器指南
- CSS 列表和计数器模块
- CSS 计数器样式模块