counter()

CSS 函数 counter()，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。
/* 简单使用 */
counter(计数器名称);

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

一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

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

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

语法

值

<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

另请参阅