symbols

语法

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;

值

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

<symbol>

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

描述

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

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

虽然引号内的符号之间不需要空格，但空格可以提高 CSS 的可读性。要使用引号作为符号，可以转义引号字符，或将字符括在不同的引号中，例如 "'"。

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

正式定义

正式语法

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

示例

设置计数器符号

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

HTML

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

CSS

@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

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

结果

规范

浏览器兼容性

另见

• @counter-style 描述符：system、additive-symbols、negative、prefix、suffix、range、pad、speak-as、fallback
• 列表样式属性：list-style、list-style-image、list-style-position
• symbols() 函数
• <url> 类型
• CSS 计数器样式模块