CSS - counter-reset 屬性

CSS 的 counter-reset 屬性用於建立新的計數器或重置現有的計數器。使用該屬性時，計數器預設初始化為零。該屬性與 counter-increment 屬性結合使用以管理元素的編號。

語法

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

屬性值

值	描述
none	不重置任何計數器。預設值。
name number	它透過名稱標識計數器，並在元素每次出現時重置要重置的值。如果未指定，則預設值為 0。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS 計數器重置屬性示例

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

使用計數器重置以增加值

要建立計數器或使用零預設值重置現有計數器，並將其用於維護和顯示遞增值，我們可以在組合使用 counter-reset 屬性和 counter-increment 屬性。以下示例顯示了這一點。

示例

<!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 屬性。以下示例顯示了這一點。

示例

<!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 屬性。以下示例顯示了這一點。

示例

<!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 屬性。以下示例顯示了這一點。

示例

<!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

列印頁面