@counter-style

語法

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

@counter-style @ 規則由一個計數器樣式名稱來標識，並且可以使用由一個或多個描述符及其值組成的 <declaration-list> 來微調已命名計數器的樣式。

計數器樣式名稱

<counter-style-name>

為你的計數器樣式提供一個名稱。它被指定為一個不帶引號且區分大小寫的 <custom-ident>。該值不應等於 none。與所有自定義識別符號一樣，你的計數器樣式的值不能是 CSS 全域性關鍵字。避免使用其他的 CSS 列舉屬性值，包括列表和計數器樣式屬性的值。你的計數器名稱不能是 list-style-type 屬性值中不區分大小寫的 decimal、disc、square、circle、disclosure-open 和 disclosure-closed。

備註： 不可覆蓋的計數器樣式名稱 decimal、disc、square、circle、disclosure-open 和 disclosure-closed 不能用作自定義計數器的名稱。但是，它們在其他需要 <counter-style-name> 資料型別的上下文中是有效的，例如在 system: extends <counter-style-name> 中。

描述符

system

指定用於將計數器的整數值轉換為字串表示形式的演算法。如果值為 cyclic、numeric、alphabetic、symbolic 或 fixed，則還必須指定 symbols 描述符。如果值為 additive，則還必須指定 additive-symbols 描述符。

symbols

指定將用於標記表示的符號。符號可以包含字串、影像或自定義識別符號。如果 system 描述符設定為 cyclic、numeric、alphabetic、symbolic 或 fixed，則此描述符是必需的。

additive-symbols

為加法系統定義加法元組。雖然 symbols 描述符中指定的符號被大多數演算法用於構造標記表示，但加法計數器系統（如羅馬數字）由一系列帶權重的符號組成。該描述符是一個計數器符號及其非負整數權重的列表，按權重降序排列。如果 system 描述符設定為 additive，則此描述符是必需的。

negative

指定當值為負數時，要追加或前置到計數器表示中的符號。

prefix

指定應前置到標記表示的符號。字首在最後階段新增到表示中，在由 negative 描述符為負計數器值新增的任何字元之前。

suffix

與 prefix 描述符類似，指定一個附加到標記表示後的符號。字尾位於標記表示之後，包括由 negative 描述符為負計數器值新增的任何字元之後。

range

定義計數器樣式適用的值範圍。如果一個計數器樣式被用來表示一個超出此描述符所定義範圍的計數器值，那麼該計數器樣式將回退到其 fallback 樣式。

pad

當你需要標記表示具有最小長度時使用。例如，如果你希望計數器從 01 開始，然後是 02、03、04 等，那麼就應該使用 pad 描述符。對於大於指定 pad 值的表示，標記將正常構造。

speak-as

描述語音合成器（如螢幕閱讀器）應如何播報計數器樣式。例如，根據此描述符的值，列表項標記的值可以被讀作數字或字母（對於有序列表），或作為音訊提示（對於無序列表）。

fallback

指定在指定的系統無法構造計數器值的表示，或者計數器值超出了指定的 range 範圍時，要回退到的系統的計數器名稱。如果回退計數器也無法表示該值，則將使用該計數器的回退（如果指定了的話）。如果沒有描述回退計數器，或者回退系統鏈都無法表示一個計數器值，那麼它最終將回退到 decimal 樣式。

正式語法

@counter-style = 
  @counter-style <counter-style-name> { <declaration-list> }  

示例

使用 counter-style 指定符號

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

上述 counter-style 規則可以像這樣應用於列表

.items {
  list-style: circled-alpha;
}

以上程式碼會產生以下結果

<ol class="items">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol>
<p>...</p>
<ol class="items" start="25">
  <li>twenty-five</li>
  <li>twenty-six</li>
  <li>twenty-seven</li>
  <li>twenty-eight</li>
</ol>

在演示頁面（程式碼）上檢視更多示例。

預製計數器樣式

在預製計數器樣式文件中可以找到超過 100 個 counter-style 程式碼片段的集合。該文件提供了滿足世界各地語言和文化需求的計數器。

計數器樣式轉換器從這個列表中提取資料，用於測試和建立可複製貼上的計數器樣式程式碼。

規範

瀏覽器相容性

另見

• counter()
• counters()
• symbols()
• list-style、list-style-image、list-style-position、list-style-type
• CSS 計數器樣式模組