counter()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
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> |
<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>
示例
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 |
| CSS Counter Styles Level 3 # extending-css2 |
浏览器兼容性
Loading…