CSS - counter-increment 属性

CSS 的counter-increment属性用于增加或减少一个或多个 CSS 计数器的值，其给定值。如果没有给出特定值，则默认增量值为 1。此属性与counter-reset和content属性结合使用。

语法

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

属性值

值	描述
none	没有计数器被递增。默认值。
id 数字	计数器由 id 标识。数字确定每次元素出现时必须递增多少次。默认增量值为 1。可以使用负值。
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 Increment 属性示例

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

用于增加值的计数器增量属性

要在内容中获得递增的值，我们可以在counter-reset和content属性结合使用counter-increment属性。如果未在counter-reset属性中指定任何值，则默认为 0。默认增量值为 1。这在以下示例中显示。

示例

Open Compiler

<!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。这在以下示例中显示。

示例

Open Compiler

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

打印页面