要使用 CSS 计数器属性，第一步涉及通过 counter-reset 属性创建它。这将启动重置计数器的过程。使用 counter-reset 属性时，计数器默认初始化为零。
属性值
<custom-ident>: 名称。名称可以是任何字符串值。
<integer>: （可选）每次元素出现时计数器重置的默认值。该值可以为零，甚至负数。如果没有提供整数，计数器将重置为零。
none: 不会重置计数器。
语法
counter-reset: <counter name> <integer> | reversed( <counter-name> ) <integer> ; 适用范围
所有 HTML 元素。
CSS counter-reset: <custom-ident>
这里是计数器重置示例:
<html>
<head>
<style>
body {
counter-reset: heading;
}
h1::before {
counter-increment: heading;
content: "Heading " counter(heading) ": ";
}
</style>
</head>
<body>
<h1>介绍</h1>
<p>这是介绍部分.</p>
<h1>背景</h1>
<p>这是背景部分.</p>
<h1>结论</h1>
<p>这是结论部分.</p>
</body>
</html> CSS counter-reset: <integer>
此程序演示了如何使用整数值的计数器重置属性。在此示例中，我们将 body 元素上的 counter-reset 属性设置为 head-counter 5，这会将 head-counter 计数器的值重置为 5。
<html>
<head>
<style>
body {
counter-reset: head-counter 5;
}
h1::before {
counter-increment: head-counter;
content: counter(head-counter) " -";
}
h2::before {
counter-increment: head-counter;
content: counter(head-counter) " -";
}
h3::before {
counter-increment: head-counter;
content: counter(head-counter) " -";
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h3>Heading 3</h3>
<h2>Heading 2</h2>
<h1>Heading 1</h1>
</body>
</html> CSS counter-reset: reversed
计数器重置属性取相反的值。它用于反转计数器。
目前仅在 Firefox 浏览器中有效。
h1 {
counter-reset: reversed(item) ;
/* 在项目计数器上设置反转标志。
将项目设置为元素数量 */
}
p {
counter-reset : reversed(unit) ;
/* 在单位计数器上设置反转标志。
将单位设置为元素数量 */
} 以下示例演示了此功能（在 Firefox 浏览器中执行此示例） ):
<html>
<head>
<style>
body {
counter-reset: reversed(chapter);
}
h1::before {
counter-increment: chapter -1;
content: "Chapter " counter(chapter) ": ";
}
</style>
</head>
<body>
<h1>介绍</h1>
<p>这是本书的简介.</p>
<h1>单元1</h1>
<p>这是本书的第1单元.</p>
<h1>单元2</h1>
<p>这是本书的第2单元.</p>
<h1>单元3</h1>
<p>这是本书的第3单元.</p>
</body>
</html>