首頁 >web前端 >css教學 >如何使用 CSS 中的反增量屬性建立編號?

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

王林
王林轉載
2023-09-06 12:29:021127瀏覽

如何使用 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>

結論

在本文中,我們學習如何使用 CSS 提供的「計數器重設」和「計數器增量」屬性來建立編號並將其顯示在網頁上。 「couter-reset」幫助我們將計數器重設為特定值,「counter-increment」幫助我們將計數器增加或減少特定值。

以上是如何使用 CSS 中的反增量屬性建立編號?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除
上一篇:CSS 網格佈局下一篇:CSS 網格佈局