symbols()

語法

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

<symbols-type> 可以是以下之一：

• cyclic：系統按照定義順序迴圈使用給定的值，當到達末尾時返回到開頭。
• numeric：系統將給定的值解釋為位值編號系統的連續單位。
• alphabetic：系統將給定的值解釋為字母編號系統的數字，類似於位值編號系統，但沒有 0。
• symbolic：系統迴圈使用值，在每個迴圈中額外列印一次（第一次迴圈列印一次，第二次迴圈列印兩次，依此類推）。
• fixed：系統迴圈使用給定的值一次，然後回退到阿拉伯數字。

正式語法

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

示例

HTML

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

CSS

ol {
  list-style: symbols(cyclic "*" "†" "‡");
}

結果

規範

瀏覽器相容性

另見

• @counter-style 描述符：system、symbols、additive-symbols、prefix、suffix、range、pad、speak-as、fallback
• 列表樣式屬性：list-style、list-style-type
• CSS 計數器樣式模組
• CSS 列表和計數器模組