/* 简单使用 */
counter(计数器名称);
/* 更改计数器显示 */
counter(countername, upper-roman)
一个计数器本身没有可见的效果,而是通过counter()
函数(和counters()
函数)返回开发人员定义的字符串(或图像) 从而使计数器拥有很棒的作用。
语法
值
<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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
另请参阅