symbols

語法

symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;

值

symbols 描述符被指定為一個或多個由空格分隔的 <symbol> 值的列表。

<symbol>

指定在計數器系統內使用的符號。列表中的每個符號可以是 <string>、<image> 或 <custom-ident>。<image> 值又可以被指定為 <url> 或 <gradient>。

描述

符號可以是字串、影像或識別符號。它在 @counter-style at-rule 中使用。

當 system 描述符的值為 cyclic、numeric、alphabetic、symbolic 或 fixed 時，必須指定 symbols 描述符。對於 additive 系統，應改用 additive-symbols 描述符來指定符號。

雖然引號內的符號之間不需要空格，但空格可以提高 CSS 的可讀性。要使用引號作為符號，可以轉義引號字元，或將字元括在不同的引號中，例如 "'"。

當使用識別符號而不是字串定義符號時，請務必遵循識別符號語法規則。例如，如上所述，ASCII 非字母字元（如 *）不是識別符號，必須被引用或轉義。十六進位制跳脫字元後跟一個空格。這個空格可能看起來像分隔兩個識別符號的空格，但它允許數字跟在十六進位制跳脫字元後面。這意味著在十六進位制轉義識別符號後必須包含兩個空格，才能將其與下一個識別符號分開。例如，最好使用字串 "\2A 1" 而不是帶有兩個空格的 \2A 1，因為您的程式碼工具可能會刪除雙空格。通常，引用需要轉義的識別符號或使用字串會更安全。

正式定義

正式語法

symbols = 
  <symbol>+  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<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>  

示例

設定計數器符號

在此示例中，symbols 描述符的值列表包括字母（A、D、E）、帶引號的數字（"1"）和帶引號的十六進位制轉義識別符號（"\24B7"），用於字元 Ⓑ。

HTML

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

CSS

@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

結果

規範

瀏覽器相容性

另見

• @counter-style 描述符：system、additive-symbols、negative、prefix、suffix、range、pad、speak-as、fallback
• 列表樣式屬性：list-style、list-style-image、list-style-position
• symbols() 函式
• <url> 型別
• CSS 計數器樣式模組