CSS 如何使用counter-increment属性创建编号

CSS中给出的 “counter-increment “属性是用来增加或减少计数器的数值的，我们可以使用CSS在网页上显示这些数值。当我们想计算一个HTML元素在网页中的出现次数时，CSS计数器就很有用。

我们还将在这里使用 “counter-reset “CSS属性，它可以帮助我们将CSS计数器的值重置或初始化为一个所需的数字。

语法

counter-increment –

css-counter increment-value;

这里，css-counter指的是在CSS中声明的计数器变量，而increment-value指的是你想要增加或减少CSS计数器的值。

counter-reset: css-counter reset-value。

这里，css-counter指的是在CSS中声明的计数器变量，而reset-value指的是你要重置计数器的值。

例子1

在这个例子中，我们将创建一个CSS计数器来计算 “p “标签的出现次数，并在网页上显示其计数。我们将设置初始计数为0，然后在每一次出现 “p “标签时，将计数器递增1。

<html lang="en">
<head>
   <title>How to create numbering using counter-increment property in CSS?</title>
   <style>
      body {
         counter-reset: p-count;
      }
      p {
         counter-increment: p-count;
      }

      p::before {
         content: counter(p-count) ". ";
      }
   </style>
</head>
<body>
   <h3>How to create numbering using counter-increment property in CSS?</h3>
   <p>First paragraph</p>
   <p>Second paragraph</p>
</body>
</html>

例子2

在这个例子中，我们将创建两个CSS计数器来计算 “p “标签的出现次数，并在网页上显示它们的计数。我们将创建一个嵌套的列表结构，首先用数字显示 “p “标签的计数，然后用罗马数字格式显示 “子 “类 “p “标签的计数。

<html lang="en">
<head>
   <title>How to create numbering using counter-increment property in CSS?</title>
   <style>
      body {
         counter-reset: p-count;
      }
      .sub {
         counter-reset: sub-count;
         margin-left: 10px;
      }
      .par {
         counter-increment: p-count;
      }
      .child {
         counter-increment: sub-count;
      }

      .par::before {
         content: counter(p-count) ". ";
      }
      .child::before {
         content: counter(p-count, lower-roman) ". ";
      }
   </style>
</head>
<body>
   <h3>How to create numbering using counter-increment property in CSS?</h3>
   <p class="par">First paragraph</p>
   <p class="par">Second paragraph</p>
   <div class="sub">
      <p class="child">Sub first</p>
      <p class="child">Sub second</p>
   </div>
</body>
</html>

总结

在这篇文章中，我们学习了如何使用CSS提供的 “counter-reset “和 “counter-increment “属性来创建数字并在我们的网页上显示它们。”counter-reset “可以帮助我们将计数器重置为一个特定的值，而 “counter-increment “可以帮助我们将计数器增加或减少一个特定的值。