counter-increment

**counter-increment** CSS 属性可用于按指定的值增加或减少命名 CSS 计数器的值，或阻止所有计数器或单个计数器的值发生变化。

如果在以空格分隔的计数器和值列表中不存在命名的计数器，则会创建该计数器。如果在计数器列表中没有为计数器提供值，则计数器将增加 1。

可以使用 counter-reset CSS 属性将计数器的值重置为任何整数值。

试试看

语法

css

/* 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。

正式定义

初始值	`none`
应用于	所有元素
继承	否
计算值	如指定
动画类型	按计算值类型

正式语法

counter-increment = 
  [ <counter-name> <integer>? ]+  |
  none

示例

减少计数器值

在此示例中，我们显示了按顺序倒序排列的数字序列。为此，我们使用计数器来显示从 100 开始的数字，每次减少 7。

HTML

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;。此外，content 属性在 ::before 伪元素中使用，使用 counter() 函数来显示计数器的值。

css

div {
  counter-reset: sevens 100;
}
i {
  counter-increment: sevens -7;
}
i:first-of-type {
  counter-increment: none;
}
i::before {
  content: counter(sevens);
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  width: 200px;
}
i {
  flex: 0 0 2em;
}

结果

如果我们没有使用 counter-reset（或 counter-set）来创建计数器并将值设置为 100，则 sevens 计数器仍将创建，但初始值为 0。

规范

规范
CSS 列表和计数器模块级别 3 # increment-set

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

计数器属性：counter-set，counter-reset
计数器 at 规则：@counter-style
计数器函数：counter()，counters()
使用 CSS 计数器指南
CSS 列表和计数器模块
CSS 计数器样式模块