语法
counter-reset: none | name number | initial | inherit;
counter-reset属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2::before {
counter-increment: section;
content: "Book " counter(section) ". ";
}
</style>
</head>
<body>
<p>点击 "Try it"按钮来设置counter-reset 属性:</p>
<button onclick="myFunction()">Try it</button>
<h2>HTML 教程</h2>
<h2>JavaScript 教程</h2>
<h2>CSS 教程</h2>
<script>
function myFunction() {
document.body.style.counterReset = "section";
}
</script>
</body>
</html>
具有负值的counter-reset属性示例：
<!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 -1;
content: "Section " counter(my-counter) ". ";
}
</style>
</head>
<body>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>
<h2>PHP 教程</h2>
<h2>Java 教程</h2>
</body>
</html>
带有编号的节和小节的 counter-reset 属性示例：
<!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>
<h3>CSS 属性说明</h3>
</body>
</html>
counter-reset 属性将一个或者多个 CSS 计数器重置为给定值。
此属性通常与 content 和 counter-increment 属性一起使用。
counter-reset 属性由两个值指定：none 和 id numbers。
“none”是该属性的默认值。
允许使用负值。
| 初始值 | none |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS2 |
| DOM 语法 | object.style.counterReset=“section”； |
counter-reset属性值说明
| 值 | 说明 |
|---|---|
| none | 计数器不递增。 |
| name number | 名称定义要重置的计数器的名称。数字定义元素每次出现时要将计数器重置为的值。如果未指定，则默认为0。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:23 来源：oir作者：oir