如何使用 CSS 中的反增量屬性建立編號？-css教學-PHP中文網

如何使用 CSS 中的反增量屬性建立編號？

王林

發布： 2023-09-06 12:29:02

轉載

1115 人瀏覽過

如何使用 CSS 中的反增量属性创建编号？

CSS 中給出的「counter-increment」屬性用於增加或減少我們可以使用 CSS 在網頁上顯示的計數器值。當我們想要計算網頁中 HTML 元素的出現次數時，CSS 計數器非常有用。

我們也將在此處使用「counter-reset」CSS 屬性，這有助於我們將 CSS 計數器值重設或初始化為所需的數字。

文法

反自增 -

css-counter increment-value;

登入後複製

這裡，css-counter是指CSS中宣告的計數器變量，increment-value是指要增加或減少CSS計數器的值。

計數器重設：css 計數器重設值。

這裡，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

在此範例中，我們將建立 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>

登入後複製