additive-symbols

語法

/* Single tuple */
additive-symbols: 3 "*";

/* Comma-separated list of tuples */
additive-symbols:
  3 "0",
  2 "\2E\20",
  1 url("symbol.png");

/* Binary counter */
additive-symbols:
  2 "1",
  1 "0";

/* Etruscan (a civilization in ancient Italy) counter  */
additive-symbols:
  100 "𐌟",
  50 "𐌣",
  10 "𐌢",
  5 "𐌡",
  1 "𐌠";

值

此描述符接受一個逗號分隔的“加法元組”列表，每個元組包含以下兩個由空格分隔的值

<integer>

一個非負整數值，指定元組關聯符號值的整數權重。

<symbol>

指定用於由元組關聯的 <integer> 權重值定義的權重值的計數器符號。

描述

additive-symbols 描述符定義了一個逗號分隔的“加法元組”列表。每個“加法元組”包含一個用空格分隔的非負整數和計數器符號。為了有效，列表必須按整數降序排列。整數和符號連線在一起形成計數器符號。

當 system 描述符的值為 cyclic、numeric、alphabetic、symbolic 或 fixed 時，請使用 symbols() 描述符而不是 additive-symbols。

正式定義

正式語法

additive-symbols = 
  [ <integer [0,∞]> && <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>  

示例

指定加法符號

HTML

在此示例中，system: additive 和 additive-symbols 描述符值指定了數字應如何表示為羅馬數字。列表中每個 <li> 元素的值根據 @counter-style 中定義的規則轉換為羅馬數字。

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li value="109">109</li>
  <li>110</li>
</ul>

CSS

@counter-style uppercase-roman {
  system: additive;
  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;
}

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

結果

對於值為 109 的列表項，數字 C 代表 100，IX 代表 9。這為列表項 109 生成了 CIX 計數器。下一個列表項自動獲得 110 的值。羅馬數字 CX 源自代表 100 的 C 和代表 10 的 X。

規範

瀏覽器相容性

另見

• @counter-style 描述符：system、symbols、negative、prefix、suffix、range、pad、speak-as、fallback
• 列表樣式屬性：list-style、list-style-image、list-style-position
• symbols() 函式用於建立匿名計數器樣式
• CSS 計數器樣式模組