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

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

浏览器兼容性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月15日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content