CSS @counter-style 規則

定義和用法

CSS @counter-style 規則用于定義自定義計數器樣式。

當預定義的樣式不符合需求時，@counter-style 規則允許您定義自己的計數器樣式。

實例

為列表指定自定義計數器樣式：

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
}
ul {
  list-style: crown;
}

親自試一試

CSS 語法

@counter-style countername {
  one or more descriptors
}

屬性值

值 描述
countername

定義計數器樣式的大小寫敏感名稱。

注意：計數器名稱不能為：none、decimal、disc、square、circle、disclosure-open 或 disclosure-closed。
system

定義將計數器的整數值轉換為字符串的算法。

如果 system 設置為：cyclic、numeric、alphabetic、symbolic 或 fixed，則需要 symbols 描述符。

如果 system 設置為：additive，則需要 additive-symbols 描述符。
symbols

定義用于標記的符號（可以是字符串、圖像或自定義標識符）。

如果 system 描述符設置為 cyclic、numeric、alphabetic、symbolic 或 fixed，則必需。

HTML UTF-8 符號。
additive-symbols

定義加法系統的加法元組。

加法計數器系統（如羅馬數字）由一系列加權符號組成。

描述符是按權重降序排列的計數器符號及其非負整數權重的列表。

如果 system 描述符設置為 additive，則必需。
negative 定義當值為負數時，附加到標記表示的前綴或后綴符號。
prefix 定義應附加到標記表示的前綴符號。
suffix 定義應附加到標記表示的后綴符號。
range

定義計數器樣式的值范圍。

如果計數器值超出范圍，則回退到其備用樣式。
pad

如果標記表示必須具有最小長度，則使用此描述符。

例如，如果您希望計數器從 01 開始，依次為 02、03、04 等，則使用 pad 描述符。

對于大于指定 pad 值的計數器，標記將正常構建。
speak-as

定義語音合成器應如何讀出計數器樣式。

例如，對于有序列表，讀出為數字或字母；對于無序列表，讀出為音頻提示。
fallback

定義如果系統無法構建標記或超出指定范圍時，回退的計數器名稱。

如果未描述備用計數器或備用系統無法表示計數器值，則回退到十進制樣式。

瀏覽器支持

表格中的數字注明了完全支持該 @ 規則的首個瀏覽器版本。

Chrome Edge Firefox Safari Opera
91 91 33 17 77