语法
counter-increment: none | id number | initial | inherit;
counter-increment属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: "Section " counter(my-counter) ". ";
}
</style>
</head>
<body>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>
<h2>PHP 教程</h2>
</body>
</html>
带有编号的节和子节的counter-increment属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* Set "section" to 0 */
counter-reset: section;
}
h2 {
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h2::before {
counter-increment: section;
content: "Book " counter(section) ": ";
}
h3::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h2>HTML</h2>
<h3>HTML 基础</h3>
<h3>HTML 模板</h3>
<h3>HTML 参考</h3>
<h3>HTML 标签</h3>
<h2>CSS</h2>
<h3>CSS 基础</h3>
<h3>CSS 参考</h3>
<h3>CSS 高级教程</h3>
<h3>CSS 属性</h3>
</body>
</html>
带有罗马数字的计数器递增属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: counter(my-counter, upper-roman) ". ";
}
</style>
</head>
<body>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>
<h2>PHP 教程</h2>
</body>
</html>
counter-increment 属性定义计数器的值应该增加或者减少多少。
此属性与内容和计数器重置属性一起使用。
counter-increment 属性由两个值指定：none 和 id numbers。
“none”是该属性的默认值。
它允许在“id number”值的情况下使用负值。
默认增量为 1.
如果计数器 id 未通过 counter-reset 初始化，则默认值为 0。
可以使用 counter-reset 属性将计数器的值设置为任意数字。
| 初始值 | none |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 离散的。 |
| 版本 | CSS2 |
| DOM 语法 | object.style.counterIncrement=“subsection”； |
CSS counter-increment属性值说明
| 值 | 说明 |
|---|---|
| none | 计数器未递增。这是默认值。 |
| id number | Id定义要递增的计数器。数字定义计数器将增加多少。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:23 来源：oir作者：oir