CSS counter() 函数

最后更新于:2022-03-27 03:03:55

CSS counter() 函数

CSS counter() 函数 CSS 函数

实例

在页面中创建一个计数器(在 body 选择器中),增加每个 <h3> 元素的计数器值,并在每个 <h3> 元素之前添加文本 “Section 计数器值”:

body {
counter-reset: section; /* 重置计数器成0 */
}
h3:before {
counter-increment: section; /* 增加计数器值 */
content: "Section " counter(section) ": "; /* 显示计数器 */
}

尝试一下 »


定义与用法

counter() 函数以字符串形式返回当前计数器的值。

计数器的值通过使用 counter-resetcounter-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) ": ";
}

尝试一下 »

实例

设置嵌套计数器:

ol {
counter-reset: section; /* 为每个ol元素创建新的计数器实例 */
list-style-type: none;
}
li:before {
counter-increment: section; /* 只增加计数器的当前实例 */
content: counters(section, ".") " "; /* 为所有计数器实例增加以”.”分隔的值 */
}

尝试一下 »


CSS counter() 函数 CSS 函数