counter()

**counter()** CSS 函数返回一个字符串，表示命名计数器的当前值（如果存在）。

counter() 函数通常在伪元素中通过 content 属性使用，但理论上它可以在任何支持 <string> 值的地方使用。

试一试

语法

css

/* Simple usage */
counter(countername);

/* changing the counter display */
counter(countername, upper-roman)

计数器本身没有可见效果。counter() 和 counters() 函数通过返回开发人员定义的字符串（或图像）使计数器变得有用。

值

counter() 函数最多接受两个参数。第一个参数是 <counter-name>。可选的第二个参数是 <counter-style>。

<counter-name>: 一个 <custom-ident>，用于标识计数器，它与 counter-reset 和 counter-increment 属性值一起使用的区分大小写的名称相同。计数器名称不能以两个连字符开头，也不能是 none、unset、initial 或 inherit。
<counter-style>: 一个 <list-style-type> 名称、<@counter-style> 名称或 symbols() 函数，其中计数器样式名称是 numeric、alphabetic 或 symbolic 简单预定义计数器样式，复杂的长格式东亚或埃塞俄比亚预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为 decimal。

注意：要连接嵌套计数器时的计数器值，请使用 counters() 函数，它提供了一个额外的 <string> 参数。

正式语法

<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>* )

示例

lower-roman 与 lower-alpha 的比较

在本例中，我们使用 lower-roman 和 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, lower-roman) "] == ["
    counter(count, lower-alpha) "]";
}

结果

使用三种样式显示计数器

在本例中，我们三次使用 counter() 函数。

HTML

html

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

我们包含了带有三种不同计数器样式的 counter() 函数，包括默认的十进制值。我们已向列表添加了填充，以为较长的 ::marker 字符串提供空间。

css

ol {
  counter-reset: listCounter;
  padding-left: 5em;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    "Item #" counter(listCounter) " is: ";
}
li::after {
  content:
    "[" counter(listCounter, decimal-leading-zero) "] == ["
    counter(listCounter, upper-roman) "]";
}

结果

规范

规范
CSS 列表和计数器模块第 3 级 # 计数器函数

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。