system

Baseline 2023

新推出

自 2023 年 9 月起，此功能可在最新的裝置和瀏覽器版本上使用。此功能可能無法在較舊的裝置或瀏覽器上使用。

system 描述符指定用於將計數器的整數值轉換為字串表示的演算法。它用於 @counter-style 規則中，以定義所宣告樣式的行為。

如果 system 描述符中指定的演算法無法為特定的計數器值構建表示，那麼該值的表示將使用提供的回退（fallback）系統來構建。

語法

css

/* Keyword values */
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/* Other values */
system: fixed 3;
system: extends decimal;
system: extends circled-letters;

值

它可以採用以下三種形式之一：

關鍵字值 cyclic、numeric、alphabetic、symbolic、additive 或 fixed 之一。
關鍵字值 fixed，可後跟一個整數。
關鍵字值 extends，後跟一個 <counter-style-name> 值。

這些值包括：

cyclic

迴圈遍歷 symbols 描述符中提供的符號列表。一旦到達列表末尾，迴圈將回到開頭重新開始。此值對於僅有一個符號的基本專案符號樣式以及具有多個符號的樣式都很有用。必須在 symbols 描述符中至少指定一個符號，否則計數器樣式無效。

numeric

將計數器符號解釋為按位記數系統中的數字。numeric 系統類似於上面描述的 alphabetic 系統。主要區別在於，在 alphabetic 系統中，symbols 描述符中給出的第一個計數器符號被解釋為 1，下一個為 2，依此類推。然而，在 numeric 系統中，第一個計數器符號被解釋為 0，下一個為 1，然後是 2，依此類推。

必須在 symbols 描述符中指定至少兩個計數器符號，否則計數器樣式無效。

alphabetic

將指定的符號解釋為字母編號系統中的數字。如果在計數器樣式中將字元 "a" 到 "z" 指定為符號，並使用 alphabetic 系統，那麼前 26 個計數器表示將是 "a"、"b" 直到 "z"。到此為止，其行為與上面描述的 symbolic 系統相同。然而，在 "z" 之後，它將繼續為 "aa"、"ab"、"ac"……

symbols 描述符必須包含至少兩個符號，否則計數器樣式無效。symbols 描述符中提供的第一個計數器符號被解釋為 1，下一個為 2，依此類推。該系統也僅對正計數器值有效。

symbolic

重複地迴圈遍歷 symbols 描述符列表中提供的符號，在每次連續遍歷列表時，將符號數量翻倍、三倍等。例如，如果在 symbols 描述符中指定了兩個符號“◽”和“◾”，在每次連續的遍歷中，它們將變為“◽◽”和“◾◾”，然後在後續遍歷中變為“◽◽◽”和“◾◾◾”，依此類推。必須在 symbols 描述符中指定至少一個符號，否則計數器樣式無效。此計數器系統僅適用於正計數器值。

additive

用於表示“符號-值”編號系統，例如羅馬數字，它不是透過在不同位置重用數字來獲得不同的值，而是為更大的值定義額外的數字。這種系統中數字的值可以透過將數字中的各個數字相加來得出。

必須指定一個名為 additive-symbols 的附加描述符，並且至少包含一個加法元組，否則計數器樣式規則將無效。加法元組類似於一個複合計數器符號，它由兩部分組成：一個正常的計數器符號和一個非負整數權重。加法元組必須按其權重的降序指定，否則該系統無效。

fixed 或 fixed <integer>

定義一組有限的符號，只遍歷一次在 symbols 描述符中提供的符號列表。一旦指定的符號被遍歷完，就會使用回退的計數器樣式。此關鍵字值在計數器樣式值為有限的情況下很有用。必須在 symbols 描述符中指定至少一個符號，否則計數器樣式無效。fixed 關鍵字後面可以跟一個可選的 <integer> 值。如果指定，該 <integer> 值表示列表中將獲得符號列表中第一個符號的項。如果省略，integer 的預設值為 1，即將列表中的第一項賦予第一個符號。

extends

透過允許修改擴充套件計數器樣式的某些方面，來擴充套件另一個瀏覽器或作者定義的計數器樣式的演算法。任何未指定的描述符及其值都從指定的擴充套件計數器樣式中繼承。如果使用 extends 指定的計數器樣式名稱尚未定義，則預設將擴充套件 decimal 計數器樣式。

它不能包含 symbols 或 additive-symbols 描述符，否則計數器樣式規則將無效。如果一個或多個計數器樣式定義與其 extends 值形成迴圈，瀏覽器將把所有參與的計數器樣式視為從 decimal 樣式擴充套件而來。

注意：當值為 cyclic、numeric、alphabetic、symbolic 或 fixed 時，需要 symbols 描述符。如果設定了 additive 值，則需要 additive-symbols 描述符。

正式定義

相關的 at-rule	`@counter-style`
初始值	`symbolic`
計算值	同指定值

正式語法

system = 
  cyclic                            |
  numeric                           |
  alphabetic                        |
  symbolic                          |
  additive                          |
  [ fixed <integer>? ]              |
  [ extends <counter-style-name> ]

示例

迴圈計數器

cyclic 值會遍歷符號列表，並在必要時重複列表。

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

css

@counter-style fisheye {
  system: cyclic;
  symbols: ◉ ➀;
  suffix: ": ";
}

ul {
  list-style: fisheye;
}

結果

固定計數器

fixed 值只遍歷符號列表一次，從 integer 值指示的列表項編號開始單次迴圈。

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

css

@counter-style circled-digits {
  system: fixed 3;
  symbols: ➀ ➁ ➂;
  suffix: ": ";
}

ul {
  list-style: circled-digits;
}

結果

符號計數器

symbolic 值會迴圈遍歷在 symbols 描述符中定義的列表，在第二次和第三次迴圈中分別將符號數量翻倍和三倍。

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

css

@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

結果

字母計數器

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

css

@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

結果

數字計數器

此處 symbols 描述符中提供的第一個符號被解釋為 0。

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

css

@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

結果

帶數字符號的數字計數器

如下例所示，如果將數字 0 到 9 指定為符號，此計數器樣式將呈現與十進位制計數器樣式相同的符號。

CSS

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

css

@counter-style numbers {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ".";
}

ul {
  list-style: numbers;
}

結果

加法計數器

此示例使用羅馬數字呈現列表。請注意，指定了一個 range。這是因為該表示只在計數器值達到 3999 之前才能產生正確的羅馬數字。一旦超出該範圍，其餘的計數器表示將基於 decimal 樣式，即回退樣式。如果你需要將計數器值表示為羅馬數字，可以使用預定義的計數器樣式之一，upper-roman 或 lower-roman，而不是自己重新建立規則。

HTML

我們在 <ol> 元素上使用 start 屬性來演示計數不一定從 1 開始。此外，我們在第五個 <li> 元素上使用 value 屬性來演示你使用 @counter-style 定義的計數器的行為與原生計數器完全相同。

html

<ol start="48">
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li value="109">109</li>
  <li>110</li>
  <ol></ol>
</ol>

CSS

css

@counter-style uppercase-roman {
  system: additive;
  range: 1 3999;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ol {
  list-style: uppercase-roman;
  padding-left: 5em;
}

結果

擴充套件計數器

此示例使用了 lower-alpha（幾個原生 list-style-type 計數器值之一）的演算法、符號和其他屬性，但透過移除計數器表示後的句點（.）並用括號將字元括起來，如 (a) 和 (b)，來對其進行擴充套件。

HTML

html

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

css

@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

ul {
  list-style: alpha-modified;
}

結果

規範

規範
CSS Counter Styles Level 3 # counter-style-system

瀏覽器相容性

另見

其他 @counter-style 描述符，包括 symbols、additive-symbols、negative、prefix、suffix、range、pad、speak-as 和 fallback
list-style、list-style-image、list-style-position
symbols()，建立匿名計數器樣式的函式表示法。

幫助改進 MDN

瞭解如何貢獻

此頁面的最後修改時間是 ⁨2025 年 7 月 14 日⁩，由 MDN 貢獻者們修改。

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