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) ". ";
}
亲自试一试 »
/* 将 "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 属性一起使用。
说明
利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。
注释： 如果使用了 "display: none"，则无法增加计数。如使用 "visibility: hidden"，则可增加计数。
| 默认值: | none |
|---|---|
| 继承性: | no |
| 支持动画: | no. 阅读有关动画的信息 |
| 版本: | CSS2 |
| JavaScript 语法: | object.style.counterIncrement = "subsection"; 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
语法
counter-increment: none|id|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| none | 默认。选择器无计数器增量。 |
| id number |
id 定义将增加计数的选择器、id 或 class。 number 定义增量。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) ". ";
}
亲自试一试 »
/* 将 "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{
/* 将 "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) " ";
}
亲自试一试 »
/* 将 "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 {
/* Increment "my-sec-counter" by 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) ". ";
}
亲自试一试 »
/* 将 "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-reset 属性
HTML DOM 参考手册: counterIncrement 属性
