counter-reset

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

counter-reset CSS 屬性用於建立命名的 CSS 計數器並將其初始化為特定值。它支援建立從 1 遞增到元素數量的計數器，以及從元素數量遞減到 1 的計數器。

試一試

counter-reset: none;

counter-reset: chapter-count 0;

counter-reset: chapter-count;

counter-reset: chapter-count 5;

counter-reset: chapter-count -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="chapters">
    <h1>Alice's Adventures in Wonderland</h1>
    <h2>Down the Rabbit-Hole</h2>
    <h2 id="example-element">The Pool of Tears</h2>
    <h2>A Caucus-Race and a Long Tale</h2>
    <h2>The Rabbit Sends in a Little Bill</h2>
  </div>
</section>

#default-example {
  text-align: left;
  counter-reset: chapter-count;
}

#example-element {
  background-color: lightblue;
  color: black;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapter " counters(chapter-count, ".") ": ";
}

語法

css

/* Create a counter with initial default value 0 */
counter-reset: my-counter;

/* Create a counter and initialize as "-3" */
counter-reset: my-counter -3;

/* Create a reversed counter with initial default value */
counter-reset: reversed(my-counter);

/* Create a reversed counter and initialize as "-1" */
counter-reset: reversed(my-counter) -1;

/* Create reversed and regular counters at the same time */
counter-reset: reversed(pages) 10 items 1 reversed(sections) 4;

/* Remove all counter-reset declarations in less specific rules */
counter-reset: none;

/* Global values */
counter-reset: inherit;
counter-reset: initial;
counter-reset: revert;
counter-reset: revert-layer;
counter-reset: unset;

counter-reset 屬性接受一個或多個空格分隔的計數器名稱列表，或關鍵字 none。對於計數器名稱，常規計數器使用格式 <counter-name>，反向計數器使用 reversed(<counter-name>)，其中 <counter-name> 是 <custom-ident> 或內建 <ol> 計數器的 list-item。可選地，每個計數器名稱後面可以跟一個 <integer> 來設定其初始值。

<custom-ident>: 指定要使用 <custom-ident> 格式建立和初始化的計數器名稱。可以使用 reversed() 函式式表示法來標記計數器為反向。
<integer>: 為新建立的計數器設定的初始值。如果未指定，預設為 0。
none: 指定不應發生任何計數器初始化。此值對於在不那麼具體的規則中覆蓋 counter-reset 值很有用。

描述

counter-reset 屬性可以建立常規計數器，並且在支援的瀏覽器中，還可以建立反向計數器。您可以建立多個常規和反向計數器，每個計數器之間用空格分隔。計數器可以是獨立的名稱，也可以是空格分隔的名稱-值對。

警告： counter-reset 和 counter-set 屬性之間存在差異。在使用 counter-reset 建立計數器後，您可以使用 counter-set 屬性調整其值。這有點違反直覺，因為儘管其名稱如此，counter-reset 屬性用於建立和初始化計數器，而 counter-set 屬性用於重置現有計數器的值。

在具有更高特異性的選擇器上設定 counter-increment: none 會覆蓋在具有較低特異性的選擇器上設定的命名計數器的建立。

預設初始值

常規計數器和反向計數器的預設初始值使其易於實現兩種最常見的編號模式：分別從一遞增到元素數量和從元素數量遞減到一。透過為命名計數器包含一個計數器值，您的計數器可以從一個整數值開始遞增或遞減。

如果未提供重置值，常規計數器預設為 0。預設情況下，常規計數器遞增一，這可以透過 counter-increment 屬性進行調整。

css

h1 {
  /* Create the counters "chapter" and "page" and set to initial default value.
     Create the counter "section" and set to "4". */
  counter-reset: chapter section 4 page;
}

反向計數器

在沒有值的情況下建立反向計數器時，計數器將以等於集合中元素數量的值開始，向下計數，以便集合中的最後一個元素為 1。預設情況下，反向計數器遞減一；這也可以透過 counter-increment 屬性更改。

css

h1 {
  /* Create reversed counters "chapter" and "section".
      Set "chapter" as the number of elements and "section" as "10".
      Create the counter "pages" with the initial default value. */
  counter-reset: reversed(chapter) reversed(section) 10 pages;
}

內建 `list-item` 計數器

有序列表（<ol>）帶有內建的 list-item 計數器，控制其編號。這些計數器會隨著每個列表項自動遞增或遞減一。counter-reset 屬性可用於重置 list-item 計數器。與其它計數器一樣，您可以使用 counter-increment 屬性覆蓋 list-item 計數器的預設增量值。

正式定義

初始值	`none`
應用於	所有元素
繼承性	否
計算值	同指定值
動畫型別	按計算值型別

正式語法

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

<reversed-counter-name> = 
  reversed( <counter-name> )

示例

覆蓋 `list-item` 計數器

在此示例中，counter-reset 屬性用於為隱式 list-item 計數器設定起始值。

HTML

html

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ol>

CSS

使用 counter-reset，我們將隱式 list-item 計數器設定為從除預設值 1 之外的值開始計數

css

ol {
  counter-reset: list-item 3;
}

結果

使用 counter-reset，我們為每個 ol 將隱式 list-item 計數器設定為從 3 開始計數。然後，第一個專案將編號為 4，第二個專案將編號為 5，等等，類似於在 HTML 中編寫 <ol start="4"> 的效果。

使用反向計數器

在以下示例中，我們聲明瞭一個名為“priority”的反向計數器。該計數器用於為五個任務編號。

html

<ul class="stack">
  <li>Task A</li>
  <li>Task B</li>
  <li>Task C</li>
  <li>Task D</li>
  <li>Task E</li>
</ul>

@supports not (counter-reset: reversed(priority)) {
  .stack {
    display: none;
  }
  body::after {
    content: "Your browser doesn't support the reversed counters yet.";
  }
}

css

li::before {
  content: counter(priority) ". ";
  counter-increment: priority -1;
}

.stack {
  counter-reset: reversed(priority);
  list-style: none;
}

在輸出中，專案按從 5 到 1 的反向順序編號。請注意，在程式碼中我們沒有指定計數器的初始值。瀏覽器會在佈局時使用計數器增量值自動計算初始值。

規範

規範
CSS 列表與計數器模組第 3 級 # counter-reset

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題