CSS counter-reset 属性
实例
创建一个计数器 ("my-sec-counter") 并为 <h2> 选择器的每次出现增加一个计数:
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 属性一起使用。
利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
注释:如果使用 "display: none"，则无法重置计数器。如果使用 "visibility: hidden"，则可以重置计数器。
| 默认值: | none |
|---|---|
| 继承性: | no |
| 支持动画: | no. 阅读有关动画的信息 |
| 版本: | CSS2 |
| JavaScript 语法: | object.style.counterReset="section" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
语法
counter-reset: none|name number|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| none | 默认。不能对选择器的计数器进行重置。 |
| id number |
id 定义重置计数器的选择器、id 或 class。 number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。 |
| initial | 将此属性设置为其默认值。请参阅 initial |
| inherit | 从其父元素继承此属性。请参阅 inherit |
更多实例
实例
创建一个计数器 ("my-sec-counter") ，每次出现 <h2> 选择器时将其减少一个:
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) ". ";
}
亲自试一试 »
实例
使用"第1节:"、"1.1"、"1.2"等对章节和小节进行编号:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
亲自试一试 »
实例
为 <h2> 选择器的每一次出现创建一个计数器并将其增加一（使用罗马数字）:
body {
/* 将 "my-sec-counter" 设置为 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
亲自试一试 »
相关页面
CSS 参考手册: ::before 伪元素
CSS 参考手册: ::after 伪元素
CSS 参考手册: content 属性
CSS 参考手册: counter-increment 属性
HTML DOM 参考手册: counterReset 属性
