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()函数)返回开发人员定义的字符串(或图像)从而使计数器拥有很棒的作用。

备注: counter()函数可以与任何 CSS 属性一起使用,但是对"content"以外的属性的支持是试验性的,对 type-or-unit 参数的支持很少。

在使用此功能之前,请仔细检查浏览器兼容性表

语法

css
/* 简单的用法 */
counter(countername);

/* 改变计数器的显示 */
counter(countername, upper-roman)

<custom-ident> 自定义标识

一个标识计数器的名称,区分大小写,并且与counter-resetcounter-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

参见