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

浏览器兼容性

BCD tables only load in the browser

相关链接