CSS - counter-set 属性

CSS 的 **counter-set** 属性创建一个计数器，并将其初始值设置为指定的值。只有在不存在具有该名称的计数器时才会创建新的计数器。如果存在具有相同名称的计数器，则其值将重置为指定的值。

语法

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

属性值

值	描述
none	不设置任何计数器。默认值。
counter-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 Set 属性示例

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

使用计数器名称和计数的计数器设置属性

要创建一个新的计数器并为其设置初始计数，我们指定计数器名称以及初始值。然后，创建的计数器可用于递增值或递减值。以下示例显示了这一点。

示例

Open Compiler

<!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** 属性结合使用可以有多种方式。在以下示例中，使用了递减值。

示例

Open Compiler

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

打印页面