附加符号

描述符接受以逗号分隔的加法元组列表，每个元组包含以下两个值，用空格分隔

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

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

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 来自 C 代表 100 和 X 代表 10。

• @counter-style 描述符：system、symbols、negative、prefix、suffix、range、pad、speak-as、fallback
• 列表样式属性：list-style、list-style-image、list-style-position
• symbols() 函数用于创建匿名计数器样式
• CSS 计数器样式 模块