counter-increment
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
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">计数值：</div>
</section>
#default-example {
text-align: left;
counter-reset: example-counter;
}
#example-element::after {
content: counter(example-counter);
}
语法
/* 将 "my-counter" 增加 1 */
counter-increment: my-counter;
/* 将 "my-counter" 减少 1 */
counter-increment: my-counter -1;
/* 将 "counter1" 增加 1，将 "counter2" 减少 4 */
counter-increment: counter1 counter2 -4;
/* 将 "page" 增加 1，将 "section" 增加 2，而 "chapter" 不变 */
counter-increment: chapter 0 section 2 page;
/* 不进行任何增减：用于覆盖优先级较低的规则 */
counter-increment: none;
/* 全局值 */
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 伪类选中第一个 <i> 元素，并设置 counter-increment: none;。此外，在 ::before 伪元素中使用 content 属性，通过 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。
规范
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # increment-set |
浏览器兼容性
参见
- 计数器属性：
counter-set、counter-reset - 计数器 at-规则：
@counter-style - 计数器函数：
counter()、counters() - 使用 CSS 计数器指南
- CSS 列表与计数器模块
- CSS 计数器样式模块