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 计数器样式模块