CSS counters() 函数

定义和用法

CSS 的 counters() 函数以字符串形式返回命名计数器和嵌套计数器的当前值。

在这里，我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串。

实例

例子 1

在这里，我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串（一个点）：

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

亲自试一试

例子 2

设置计数器的样式，并将连接字符串设置为 "-"：

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section, "-", lower-alpha) " ";
}

亲自试一试

CSS 语法

counters(countername, string, counterstyle)

技术细节

浏览器支持

相关页面

教程：CSS 计数器

参考：CSS content 属性

参考：CSS counter-increment 属性

参考：CSS counter-reset 属性

参考：CSS @counter-style 规则

参考：CSS counter() 函数