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 計數器樣式模組