你有了解css計數器（序列數字字元自動遞增）嗎？如何透過css的content屬性實現呢？

王铁柱6發表於2024-11-26
CSS字元

是的，我瞭解 CSS 計數器。它允許你用 CSS 建立自動遞增的序列數字，而無需依賴 JavaScript。這對於建立有序列表、章節編號、圖例等非常有用。content 屬性配合計數器可以顯示計數器的值。

以下是透過 CSS 的 content 屬性實現 CSS 計數器的方法：

  1. 建立計數器: 使用 counter-reset 屬性建立一個或多個計數器。 counter-reset 屬性通常放在父元素上，它會重置計數器的值。你可以指定計數器的名稱和初始值（預設為 0）。

    .parent {
  counter-reset: section; /* 建立名為 "section" 的計數器 */
  counter-reset: figure 0; /* 建立名為 "figure" 的計數器，初始值為 0 */
}

  2. 遞增計數器: 使用 counter-increment 屬性遞增計數器的值。counter-increment 屬性通常放在需要遞增計數器的子元素上。你可以指定遞增的步長（預設為 1）。

    .child {
  counter-increment: section; /* 每次遇到 .child 元素，"section" 計數器加 1 */
  counter-increment: figure 2; /* 每次遇到 .child 元素，"figure" 計數器加 2 */
}

  3. 顯示計數器的值: 使用 content 屬性和 counter() 或 counters() 函式顯示計數器的值。content 屬性通常與 ::before 或 ::after 偽元素一起使用。

    .child::before {
  content: counter(section) ". "; /* 顯示 "section" 計數器的值，並在後面新增 ". " */
}

    counters() 函式用於建立巢狀計數器，它接受兩個引數：計數器名稱和分隔符。

    .grandchild::before {
  content: counters(section, ".") " "; /* 顯示巢狀的 "section" 計數器的值，用 "." 分隔 */
}

示例：

<div class="parent">
  <div class="child">Child 1
    <div class="grandchild">Grandchild 1</div>
    <div class="grandchild">Grandchild 2</div>
  </div>
  <div class="child">Child 2
    <div class="grandchild">Grandchild 3</div>
  </div>
</div>

.parent {
  counter-reset: section;
}

.child {
  counter-increment: section;
}

.child::before {
  content: counter(section) ". ";
}

.grandchild::before {
  content: counters(section, ".") " ";
}

結果：

  1. Child 1
    1.1 Grandchild 1
    1.2 Grandchild 2
  2. Child 2
    2.1 Grandchild 3

其他樣式:

你可以使用 list-style-type 屬性配合計數器來控制計數器的顯示樣式，例如使用羅馬數字、字母等。

.child::before {
  content: counter(section, upper-roman) ". "; /* 使用大寫羅馬數字 */
}

希望這個解釋能夠幫助你理解 CSS 計數器的使用方法。 如果你還有其他問題，請隨時提出。

相關文章