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…