counter()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS 函数 counter()
,返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用,但是理论上可以在支持<string>值的任何地方使用。
css
/* 简单使用 */
counter(计数器名称);
/* 更改计数器显示 */
counter(countername, upper-roman)
一个计数器本身没有可见的效果,而是通过counter()
函数(和counters()
函数)返回开发人员定义的字符串(或图像)从而使计数器拥有很棒的作用。
语法
css
/* 简单的用法 */
counter(countername);
/* 改变计数器的显示 */
counter(countername, upper-roman)
值
<custom-ident> 自定义标识
-
一个标识计数器的名称,区分大小写,并且与
counter-reset
和counter-increment
中的“名称”相同。名称不能以两个破折号开头,并且不能为none
,unset
,initial
, 或inherit
。 <counter-style> 计数器样式
-
计数器样式名称或
symbols()
函数,其中计数器样式名称是数字,字母或符号的简单预定义计数器样式,复杂的东亚或埃塞俄比亚长手预定义计数器样式,或其他预定义计数器样式。如果省略,则计数器样式默认为十进制。
形式语法
<counter()> =
counter( <counter-name> , <counter-style>? )
<counter-style> =
<counter-style-name> |
<symbols()>
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
示例
default value compared to upper Roman
HTML
html
<ol>
<li></li>
<li></li>
<li></li>
</ol>
CSS
css
ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::after {
content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman)
"]";
}
结果
decimal-leading-zero compared to lower-alpha
HTML
html
<ol>
<li></li>
<li></li>
<li></li>
</ol>
CSS
css
ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::after {
content: "[" counter(count, decimal-leading-zero) "] == ["
counter(count, lower-alpha) "]";
}
结果
规范
Specification |
---|
CSS Lists and Counters Module Level 3 # counter-functions |
浏览器兼容性
BCD tables only load in the browser