符号

symbols CSS 描述符 @counter-style at-rule 用于指定用于在指定的计数器系统中创建计数器表示的符号。当 system 描述符的值为 cyclic、numeric、alphabetic、symbolic 或 fixed 时，必须指定此描述符。

语法

css
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;

Values

symbols 描述符指定为一个或多个以空格分隔的 <symbol> 值的列表。

<symbol>

指定在计数器系统中使用的符号。列表中的每个符号可以是 <string>、<image> 或 <custom-ident>。<image> 值可以依次指定为 <url>() 或 <gradient>。

注意：使用标识符作为符号时，请注意 *、" 和 \ 等 ASCII 非字母字符不被视为标识符。它们必须用字符串括起来或进行转义。

描述

符号可以是字符串、图像或标识符。它用于 @counter-style at-rule 中。

当 system 描述符的值为 cyclic、numeric、alphabetic、symbolic 或 fixed 时，必须指定 symbols 描述符。对于 additive 系统，请改用 additive-symbols 描述符来指定符号。

虽然带引号的符号之间不需要空格，但它使 CSS 更易于阅读。要使用引号作为符号，请转义引号字符或将字符括在不同的引号中，例如 "'"。

使用标识符而不是字符串定义符号时，请确保使用标识符语法规则。例如，如上所述，* 等 ASCII 非字母字符不是标识符，必须用引号括起来或转义。十六进制转义字符后跟一个空格。此空格可能看起来像是分隔两个标识符的空格，但它允许数字跟随十六进制转义字符。这意味着十六进制转义标识符后必须包含两个空格才能将其与下一个标识符分隔开。例如，最好使用字符串 "\2A 1" 而不是 \2A 1（带两个空格），因为您的代码工具可能会删除双空格。通常，最好引用需要转义的标识符或使用字符串。

正式定义

相关 at-rule@counter-style
初始值n/a（必需）
计算值如指定

正式语法

symbols = 
  <symbol>+  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>       |
  <gradient>  

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

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

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

示例

设置计数器符号

在此示例中，symbols 描述符的值列表包括字母（A、D、E）、带引号的数字（"1"）和带引号的十六进制转义标识符（"\24B7"），用于字符 Ⓑ。

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 symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

结果

规范

规范
CSS 计数器样式级别 3
# counter-style-symbols

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅