CSS 属性

CSS counter-set 属性用于将 CSS 计数器的值更改为指定的数字。它可以更改现有计数器的值，并仅在不存在同名计数器的情况下创建新计数器。

属性值

  • <custom-ident>: 计数器的名称。名称可以是任何字符串值。

  • integer - 每次元素出现时计数器设置的默认值。该值可以为零，甚至负数。如果没有提供整数，计数器将重置为零。

  • none: 不会采取任何操作来设置计数器。

语法

counter-set: <counter name> <integer> ;

适用范围

所有 HTML 元素。

CSS counter-set: <custom-ident> 

该程序演示了计数器设置属性的用法。在此示例中，我们将 body 元素上的 counter-set 属性设置为 head-counter 3，这会将 head-counter 计数器的值设置为 3。

<html>
<head>
<style>
   body {
      counter-set: head-counter 3;
   }

   h1::before {
      counter-increment: head-counter;
      content: "Counter: " counter(head-counter) ": ";
   }

   h2::before {
      counter-increment: head-counter;
      content: "Sub-counter: " counter(head-counter)  ": ";
   }

   h3::before {
      counter-increment: head-counter;
      content: "Sub-sub-counter: " counter(head-counter)  ": ";
   }
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h3>Heading 3</h3>
</body>
</html>

CSS counter-set: <integer> 

该程序演示了如何使用带有整数值的计数器设置属性。此代码将展示值为 -5 的 counter-set 属性的用法。 counter-set 属性应用于 body 元素，将 item-counter 计数器的值设置为 -5。

<html>
<head>
<style>
   body {
      counter-reset: item-counter -5;
   }

   .counter-item::before {
      counter-increment: item-counter;
      content: counter(item-counter) " -";
   }
</style>
</head>
<body>
   <div class="counter-item">Item 1</div>
   <div class="counter-item">Item 2</div>
   <div class="counter-item">Item 3</div>
   <div class="counter-item">Item 4</div>
</body>
</html>