CSS - counter-set 屬性

CSS 的 **counter-set** 屬性建立一個計數器，並將其初始值設定為指定的值。只有在不存在具有該名稱的計數器時才會建立新的計數器。如果存在具有相同名稱的計數器，則其值將重置為指定的值。

語法

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

屬性值

值	描述
none	不設定任何計數器。預設值。
counter-name number	它設定計數器名稱和計數值，以便在元素每次出現時重置計數器。如果未指定，則使用預設值 0。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS Counter Set 屬性示例

以下示例使用不同的值解釋了 **counter-set** 屬性。

使用計數器名稱和計數的計數器設定屬性

要建立一個新的計數器併為其設定初始計數，我們指定計數器名稱以及初始值。然後，建立的計數器可用於遞增值或遞減值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         counter-set: numcounter 0;
      }

      h3::before {
         counter-increment: numcounter;
         content: "Chapter " counter(numcounter) ". ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-set property
   </h2>
   <h3>
      Python
   </h3>
   <h3>
      Matplotlib
   </h3>
   <h3>
      Numpy
   </h3>
   <h3>
      Scipy
   </h3>
   <h3>
      Scikit-learn
   </h3>
   <h3>
      Open CV
   </h3>

</body>

</html>

帶有變體的計數器設定屬性

**counter-set** 屬性與 **counter-increment** 屬性結合使用可以有多種方式。在以下示例中，使用了遞減值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         counter-set: numcounter 7;

      }

      h3::before {
         counter-increment: numcounter -1;
         content: "Step " counter(numcounter) ". ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-set property
   </h2>
   <p>
      Decreasing values:
   </p>
   <h3>
      Delivery
   </h3>
   <h3>
      Payment
   </h3>
   <h3>
      Confirm Address
   </h3>
   <h3>
      Proceed to Checkout
   </h3>
   <h3>
      Add to Bag
   </h3>
   <h3>
      Search Item
   </h3>

</body>

</html>

支援的瀏覽器

屬性
counter-set	85.0	85.0	68.0	不支援	71.0

css_properties_reference.htm

列印頁面