CSS counter-increment 属性
示例
创建一个计数器（“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-increment 属性用于增加或减少一个或多个 CSS 计数器的值。
counter-increment 属性通常与 counter-reset 属性和 content 属性一起使用。
| 默认值 | none |
|---|---|
| 继承 | no |
| 可动画 | 否。 阅读关于可动画属性 |
| 版本 | CSS2 |
| JavaScript 语法 | object.style.counterIncrement = "subsection"; 尝试一下 |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS 语法
counter-increment: none|id|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| none | 默认值。不会增加任何计数器 |
| id 号码 | id 定义了要增加的计数器。number 设置每次出现选择器时计数器增加的数量。默认增量为 1。允许负值。如果 id 指的是一个尚未通过 counter-reset 初始化过的计数器，则默认初始值为 0。 |
| 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) ". ";
}
自己动手试一试 »
示例
使用“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-reset 属性
CSS 函数：counter() 函数
HTML DOM 参考：counterIncrement 属性
