CSS counter() 函数
最后更新于：2022-03-27 03:03:55
CSS counter() 函数
CSS 函数实例
在页面中创建一个计数器（在 body 选择器中），增加每个 <h3> 元素的计数器值，并在每个 <h3> 元素之前添加文本 “Section 计数器值”：
body {
counter-reset: section; /* 重置计数器成0 */
}
h3:before {
counter-increment: section; /* 增加计数器值 */
content: "Section " counter(section) ": "; /* 显示计数器 */
}
counter-reset: section; /* 重置计数器成0 */
}
h3:before {
counter-increment: section; /* 增加计数器值 */
content: "Section " counter(section) ": "; /* 显示计数器 */
}
定义与用法
counter() 函数以字符串形式返回当前计数器的值。
计数器的值通过使用 counter-reset 和 counter-increment 操作，在 content 上应用 counter() 函数来显示在页面上。
支持版本：CSS3
浏览器支持
| 函数 | |||||
|---|---|---|---|---|---|
| counter() | 支持 | 支持 | 支持 | 支持 | 支持 |
CSS 语法
counter(countername, counterstyle)
| 值 | 描述 |
|---|---|
| countername | 必需。 计数器的名称（与 counter-reset 和 counter-increment 属性使用的名称相同）。 |
| counterstyle | 可选的。 计数器的样式（可以是 CSS list-style-type 属性值）。 |
更多实例
实例
设置计数器样式：
body {
counter-reset: section;
} h2::before {
counter-increment: section;
content: "Section " counter(section, upper-roman) ": ";
}
counter-reset: section;
} h2::before {
counter-increment: section;
content: "Section " counter(section, upper-roman) ": ";
}
实例
设置嵌套计数器：
ol {
counter-reset: section; /* 为每个ol元素创建新的计数器实例 */
list-style-type: none;
}
li:before {
counter-increment: section; /* 只增加计数器的当前实例 */
content: counters(section, ".") " "; /* 为所有计数器实例增加以”.”分隔的值 */
}
counter-reset: section; /* 为每个ol元素创建新的计数器实例 */
list-style-type: none;
}
li:before {
counter-increment: section; /* 只增加计数器的当前实例 */
content: counters(section, ".") " "; /* 为所有计数器实例增加以”.”分隔的值 */
}