CSS counter-reset 属性
示例
为每个 <h2> 选择器创建计数器(“my-sec-counter”)并将其递增一
body {
/* 将 "my-sec-counter" 设置为 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* 将 "my-sec-counter" 递增 1 */
counter-increment: my-sec-counter;
content: "Section " counter(my-sec-counter) ". ";
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
counter-reset
属性用于创建或重置一个或多个 CSS 计数器。
counter-reset
属性通常与 counter-increment 属性和 content 属性一起使用。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
属性 | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS 语法
counter-reset: none|name number|initial|inherit;
属性值
值 | 描述 |
---|---|
none | 默认值。不会重置任何计数器 |
id 号码 | id 定义了要重置的计数器。number 设置计数器在选择器每次出现时重置的值。默认的number值为 0 |
initial | 将此属性设置为其默认值。阅读关于initial |
inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
示例
为每个 <h2> 选择器创建计数器(“my-sec-counter”)并将其递减一
body {
/* 将 "my-sec-counter" 设置为 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* 将 "my-sec-counter" 递减 1 */
counter-increment: my-sec-counter -1;
content: "Section " counter(my-sec-counter) ". ";
}
自己动手试一试 »
示例
为章节和子章节编号,例如“Section 1:”、“1.1”、“1.2”等。
body {
/* 将 "section" 设置为 0 */
counter-reset: section;
}
h1 {
/* 将 "subsection" 设置为 0 */
counter-reset: subsection;
}
h1::before {
/* 将 "section" 递增 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* 将 "subsection" 递增 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
自己动手试一试 »
示例
为每个 <h2> 选择器创建一个计数器,并使用罗马数字将其递增一
body {
/* 将 "my-sec-counter" 设置为 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* 将 "my-sec-counter" 递增 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) ". ";
}
自己动手试一试 »
相关页面
CSS 参考:::before 伪元素
CSS 参考:::after 伪元素
CSS 参考:content 属性
CSS 参考:counter-increment 属性
CSS 函数:counter() 函数
HTML DOM 参考:counterReset 属性