CSS counter() 函数
示例
为页面创建一个计数器（在 body 选择器中）。为每个 <h2> 元素递增计数器值，并在每个 <h2> 元素之前添加文本“Section <计数器值>:”
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
亲自试一试 »
下面还有更多“亲自试一试”的示例。
定义和用法
counter() 函数将命名计数器的当前值作为字符串返回。
| 版本 | CSS3 |
|---|
浏览器支持
| 函数 | |||||
|---|---|---|---|---|---|
| counter() | 是 | 是 | 是 | 是 | 是 |
CSS 语法
counter(countername, counterstyle)
| 值 | 描述 |
|---|---|
| countername | 必需。计数器的名称（与 counter-reset 和 counter-increment 属性使用的名称相同） |
| counterstyle | 可选。计数器的样式（可以是 list-style-type 值） |
更多示例
示例
设置计数器的样式
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section, upper-roman) ": ";
}
亲自试一试 »
相关页面
CSS 参考：content 属性
CSS 参考：counter-increment 属性
CSS 参考：counter-reset 属性
