counter()
/* 简单使用 */
counter(计数器名称);
/* 更改计数器显示 */
counter(countername, upper-roman)
一个计数器本身没有可见的效果,而是通过counter()
函数(和counters()
函数)返回开发人员定义的字符串(或图像)从而使计数器拥有很棒的作用。
注释:counter()
函数可以与任何 CSS 属性一起使用,但是对"content"
以外的属性的支持是试验性的,对 type-or-unit 参数的支持很少。
在使用此功能之前,请仔细检查浏览器兼容性表。
语法
值
<custom-ident> 自定义标识
- 一个标识计数器的名称,区分大小写,并且与
counter-reset
和counter-increment
中的“名称”相同。名称不能以两个破折号开头,并且不能为none
,unset
,initial
, 或inherit
。 <counter-style> 计数器样式
- 计数器样式名称或
symbols()
函数,其中计数器样式名称是数字,字母或符号的简单预定义计数器样式,复杂的东亚或埃塞俄比亚长手预定义计数器样式,或其他预定义计数器样式。如果省略,则计数器样式默认为十进制。
正式语法
counter( <custom-ident>, <counter-style>? ) where<counter-style> = <counter-style-name> | symbols()
where<counter-style-name> = <custom-ident>
示例
default value compared to upper Roman
HTML
<ol>
<li></li>
<li></li>
<li></li>
</ol>
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
<ol>
<li></li>
<li></li>
<li></li>
</ol>
CSS
ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::after {
content: "[" counter(count, decimal-leading-zero) "] == ["
counter(count, lower-alpha) "]";
}
结果
Specifications
Specification | 状态 | 注释 |
---|---|---|
CSS Lists Module Level 3 CSS Counters |
Working Draft | No change |
CSS Level 2 (Revision 1) CSS Counters |
Recommendation | Initial definition |
浏览器兼容性
BCD tables only load in the browser