additive-symbols

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

additive-symbols 描述符定义符号，用于值可累积的可数的 system的项。 additive-symbols 定义累积的元组（tuples）,每个元组项都包含一个符号和一个非负整数的权重。additive system 被用于构造 sign-value numbering （符号 - 值，指数字的值就是是符号加在一起的值）系统，比如罗马数字。

css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);

当系统描述符是循环，数字，拼音，象征，或固定的时候，使用 symbols()代替additive-symbols

Related at-rule@counter-style
初始值n/a (required)
计算值as specified

语法

Formal syntax

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

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

CSS

css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols:
    V 5,
    IV 4,
    I 1;
}
.list {
  list-style: additive-symbols-example;
}

结果

规范

Specification
CSS Counter Styles Level 3
# counter-style-symbols

浏览器兼容性

相关链接