symbols()

symbols() CSS 函数允许直接作为属性（如 list-style）的值定义计数器样式，提供了一种功能较弱但更简单的替代方法，而不是使用 @counter-style 方法定义计数器样式。

与 @counter-style 定义可重用计数器样式不同，symbols() 是匿名的（即，它只能使用一次）。此函数接受字符串和图像作为值。相比之下，@counter-style 的 symbols 描述符也接受标识符。

语法

css
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );

<symbols-type> 可以是以下之一

  • cyclic：系统按定义顺序循环遍历给定值，并在到达末尾时返回开头。
  • numeric：系统将给定值解释为位置值计数系统的连续单位。
  • alphabetic：系统将给定值解释为字母计数系统的数字，类似于位置值计数系统，但没有 0。
  • symbolic：系统循环遍历值，并在每个循环中打印它们一次（第一个循环打印一次，第二个循环打印两次，等等）。
  • fixed：系统循环遍历给定值一次，然后回退到阿拉伯数字。

示例

HTML

html
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

CSS

css
ol {
  list-style: symbols(cyclic "*" "†" "‡");
}

结果

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅