CSS counter() 函数
最后更新于:2022-03-27 03:03:55
CSS counter() 函数
实例
在页面中创建一个计数器(在 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, ".") " "; /* 为所有计数器实例增加以”.”分隔的值 */
}