CSS - counter-increment 屬性

CSS 的counter-increment屬性用於增加或減少一個或多個 CSS 計數器的值，其給定值。如果沒有給出特定值，則預設增量值為 1。此屬性與counter-reset和content屬性結合使用。

語法

counter-increment: none | id | initial | inherit;

屬性值

值	描述
none	沒有計數器被遞增。預設值。
id 數字	計數器由 id 標識。數字確定每次元素出現時必須遞增多少次。預設增量值為 1。可以使用負值。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS Counter Increment 屬性示例

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

用於增加值的計數器增量屬性

要在內容中獲得遞增的值，我們可以在counter-reset和content屬性結合使用counter-increment屬性。如果未在counter-reset屬性中指定任何值，則預設為 0。預設增量值為 1。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .part1 {
         color: red;
         counter-reset: section;
      }

      .part1 h2::before {
         counter-increment: section;
         content: "Section " counter(section) ". ";
      }

      .part2 {
         color: green;
         counter-reset: part 7;
      }

      .part2 h2::before {
         counter-increment: part 2;
         content: "Chapter " counter(part) ". ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-increment property
   </h2>
   <h4>
      Increasing values
   </h4>
   <p>
      Each encounter of h1 tag increments the counter by 1,
      the initial value is 0.
   </p>
   <div class="part1">
      <h2>
         HTML
      </h2>
      <h2>
         CSS
      </h2>
      <h2>
         JAVASCRIPT
      </h2>
      <h2>
         PHP
      </h2>
      <h2>
         SQL
      </h2>
   </div>
   <p>
      Each encounter of h1 tag increments the counter by 2,
      the initial value is 7
   </p>
   <div class="part2">
      <h2>
         Abstract
      </h2>
      <h2>
         Introduction
      </h2>
      <h2>
         Table of Contents
      </h2>
      <h2>
         Content
      </h2>
      <h2>
         Conclusion
      </h2>
   </div>
</body>

</html>

用於減少值的計數器增量屬性

要在內容中獲得遞減的值，我們可以在counter-reset和content屬性結合使用counter-increment屬性。如果未在counter-reset屬性中指定任何值，則預設為 0。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .part1 {
         color: blue;
         counter-reset: section;
      }

      .part1 h2::before {
         counter-increment: section -1;
         content: "Section " counter(section) ". ";
      }

      .part2 {
         color: orange;
         counter-reset: part 7;
      }

      .part2 h2::before {
         counter-increment: part -2;
         content: "Chapter " counter(part) ". ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-increment property
   </h2>
   <h4>
      Decreasing values
   </h4>
   <p>
      Each encounter of h1 tag decrements the counter by 1,
      the initial value is 0.
   </p>
   <div class="part1">
      <h2>
         HTML
      </h2>
      <h2>
         CSS
      </h2>
      <h2>
         JAVASCRIPT
      </h2>
      <h2>
         PHP
      </h2>
      <h2>
         SQL
      </h2>
   </div>
   <p>
      Each encounter of h1 tag decrements the counter by 2,
      the initial value is 7
   </p>
   <div class="part2">
      <h2>
         Abstract
      </h2>
      <h2>
         Introduction
      </h2>
      <h2>
         Table of Contents
      </h2>
      <h2>
         Content
      </h2>
      <h2>
         Conclusion
      </h2>
   </div>
</body>

</html>

支援的瀏覽器

屬性
counter-increment	4.0	8.0	2.0	3.1	9.6

css_properties_reference.htm

列印頁面