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：系统循环使用给定的值一次，然后回退到阿拉伯数字。
正式语法
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<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
<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 Counter Styles Level 3 # symbols-function |
浏览器兼容性
加载中…