CSS - counter-reset 属性

CSS 的 counter-reset 属性用于创建新的计数器或重置现有的计数器。使用该属性时，计数器默认初始化为零。该属性与 counter-increment 属性结合使用以管理元素的编号。

语法

counter-reset: none | name number | initial | inherit;

属性值

值	描述
none	不重置任何计数器。默认值。
name number	它通过名称标识计数器，并在元素每次出现时重置要重置的值。如果未指定，则默认值为 0。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 计数器重置属性示例

以下示例说明了使用不同值的 counter-reset 属性。

使用计数器重置以增加值

要创建计数器或使用零默认值重置现有计数器，并将其用于维护和显示递增值，我们可以在组合使用 counter-reset 属性和 counter-increment 属性。以下示例显示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         counter-reset: heading;
      }

      h1::before {
         counter-increment: heading;
         content: "Heading " counter(heading) ": ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-reset property
   </h2>
   <h1>
      Introduction
   </h1>
   <p>
      This is the introduction section.
   </p>
   <h1>
      Background
   </h1>
   <p>
      This is the background section.
   </p>
   <h1>
      Conclusion
   </h1>
   <p>
      This is the conclusion section.
   </p>
</body>

</html>

计数器重置属性与整数值

要创建计数器或使用特定整数值重置现有计数器，并将其用于维护和显示递增值，我们可以在组合使用 counter-reset 属性和 counter-increment 属性。以下示例显示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         counter-reset: chapter 3;
      }

      h1::before {
         counter-increment: chapter;
         content: "Chapter " counter(chapter) ": ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-reset property
   </h2>
   <h1>
      HTML
   </h1>
   <p>
      This is the HTML chapter.
   </p>
   <h1>
      CSS
   </h1>
   <p>
      This is the CSS chapter.
   </p>
   <h1>
      JAVASCRIPT
   </h1>
   <p>
      This is the JAVASCRIPT chapter.
   </p>
</body>

</html>

使用计数器重置以减少值

要创建计数器或使用特定整数值重置现有计数器，并将其用于维护和显示递减值，我们可以在组合使用 counter-reset 属性和 counter-increment 属性。以下示例显示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         counter-reset: floor 4;
      }

      h1::before {
         counter-increment: floor -1;
         content: "Level " counter(floor) ": ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-reset property
   </h2>
   <h1>
      Third Floor
   </h1>
   <p>
      This is third floor.
   </p>
   <h1>
      Second Floor
   </h1>
   <p>
      This is second floor.
   </p>
   <h1>
      First Floor
   </h1>
   <p>
      This is first floor.
   </p>
</body>

</html>

使用计数器重置以重置现有计数器

要重置现有计数器并将其用于维护和显示递增或递减值，我们可以在组合使用 counter-reset 属性和 counter-increment 属性。以下示例显示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>

   <style>
      body {
         counter-reset: section-counter;
      }

      h3 {
         counter-increment: section-counter;
      }

      h3::before {
         content: "Section " counter(section-counter) ": ";
         font-weight: bold;
      }

      .reset-counter {
         counter-reset: section-counter 9;
      }
   </style>
</head>

<body>
   <h2>
   CSS counter-reset property
   </h2>
   <h1>
      Introduction
   </h1>
   <h3>
      Overview
   </h3>
   <h3>
      Details
   </h3>

   <div class="reset-counter">
      <h1>
         Background
      </h1>
      <h3>
         History
      </h3>
      <h3>
         Context
      </h3>
   </div>

   <h1>
      Conclusion
   </h1>
   <h3>
      Summary
   </h3>
   <h3>
      Future Work
   </h3>

</body>

</html>

支持的浏览器

属性
counter-reset	4.0	8.0	2.0	3.1	9.6

css_properties_reference.htm

打印页面