counters()

Baseline 已廣泛支援

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

counters() CSS 函式可以在巢狀計數器時組合標記。該函式返回一個字串，它連線了指定名稱的巢狀計數器（如果存在）的當前值以及提供的字串。第三個可選引數可以定義列表樣式。

counters() 函式通常用於偽元素中的 content 屬性，但理論上，它可以在任何支援 <string> 值的地方使用。

counters() 函式有兩種形式：counters(<name>, <string>) 和 counters(<name>, <string>, <style>)。生成的文字是具有給定 <name> 的所有計數器的值，從最外層到最內層排列，並由指定的 <string> 分隔。計數器以指示的 <style> 渲染，如果未指定 <style>，則預設為 decimal。

試一試

ol {
  counter-reset: index;
  list-style-type: none;
}

li::before {
  counter-increment: index;
  content: counters(index, ".", decimal) " ";
}

<ol>
  <li>Mars</li>
  <li>
    Saturn
    <ol>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ol>
  </li>
  <li>
    Uranus
    <ol>
      <li>Titania</li>
    </ol>
  </li>
</ol>

語法

css

/* Basic usage  - style defaults to decimal */
counters(counter-name, '.');

/* changing the counter display */
counters(counter-name, '-', upper-roman)

一個計數器本身沒有可見效果。counters() 函式（和 counter() 函式）透過返回開發者定義的內容使其有用。

值

counters() 函式接受兩個或三個引數。第一個引數是 <counter-name>。第二個引數是連線符 <string>。可選的第三個引數是 <counter-style>。

<counter-name>: 一個<custom-ident>，用於標識計數器，它與 counter-reset 和 counter-increment 屬性使用的區分大小寫的名稱相同。名稱不能以兩個破折號開頭，也不能是 none、unset、initial 或 inherit。另外，對於內聯的、一次性使用的計數器，在支援 symbols() 的瀏覽器中，可以使用 symbols() 函式代替命名計數器。
<string>: 任意數量的文字字元。非拉丁字元必須使用其 Unicode 轉義序列進行編碼：例如，\000A9 表示版權符號。
<counter-style>: 一個計數器樣式名稱或一個 symbols() 函式。計數器樣式名稱可以是預定義樣式，如數字、字母或符號，也可以是複雜的長格式預定義樣式，如東亞或衣索比亞樣式，或者是其他預定義計數器樣式。如果省略，計數器樣式預設為 decimal。

返回值為一個字串，其中包含元素 CSS 計數器集中名為 <counter-name> 的所有計數器的所有值，以 <counter-style> 定義的計數器樣式（如果省略則為 decimal）表示。返回字串按從最外層到最內層的順序排序，並由指定的 <string> 連線。

注意： 有關非連線計數器的資訊，請參閱 counter() 函式，該函式省略了 <string> 引數。

正式語法

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

示例

比較預設計數器值與大寫羅馬數字

本示例包含兩個 counters() 函式：一個設定了 <counter-style>，另一個預設為 decimal。

HTML

html

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

css

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content:
    counters(listCounter, ".") " == "
    counters(listCounter, ".", lower-roman);
}

結果

比較 decimal-leading-zero 計數器值與小寫字母

此示例包含三個 counters() 函式，每個函式具有不同的 <string> 和 <counter-style> 值。

HTML

html

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

css

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content:
    counters(count, "-", decimal-leading-zero) ") ";
}
li::before {
  content:
    counters(count, "~", upper-alpha) " == "
    counters(count,  "*", lower-alpha);
}

結果

規範

規範
CSS 列表與計數器模組第 3 級 # 計數器函式
CSS Counter Styles Level 3 # 擴充套件 CSS2

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面上次修改於 2025 年 10 月 10 日，由 MDN 貢獻者完成。

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