CSS - 計數器

CSS 計數器充當用於編號目的的變數。它們可以透過 CSS 規則進行增加或減少。計數器使我們能夠根據內容的位置修改內容的呈現方式。例如，您可以使用計數器自動為段落、標題和列表分配編號。

body {
    counter-reset: section;
}

/* A simple counter when a new h2 element starts */
h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

CSS 計數器是一種由 CSS 維護的變數，可以在文件的不同位置遞增、遞減或重置。在本教程中，我們將學習如何使用 CSS 實現和管理計數器。

如何在 CSS 中實現計數器？

計數器可用於建立編號列表、章節或任何其他需要計數的內容。請按照以下步驟在網頁中建立計數器

初始化計數器： 要開始使用計數器，您首先需要使用counter-reset 屬性對其進行初始化。

body {
    counter-reset: section;
}

此示例初始化一個名為 section 的計數器，其初始值為 0。每次 body 元素出現時，計數器都會重置為 0。

遞增計數器： 要遞增計數器，請使用counter-increment 屬性。

li::before {
    counter-increment: section;
}

此示例每次 <li> 元素出現時遞增 section 計數器，並在文字前面顯示計數。

顯示計數器： 要顯示計數器的值，請使用counters() 函式。

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

此示例在 li 元素的內容前面顯示 section 計數器的值，後跟一個句點和一個空格。

使用計數器進行自動編號

計數器可用於自動對文件中的元素進行編號。以下示例演示瞭如何使用計數器對列表項進行編號。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            counter-reset: section;
        }
        
        h2::before {
            counter-increment: section;
            content: "Section " counter(section) ": ";
        }
    </style>
</head>

<body>
    <h1> CSS Counters</h1>

    <h2>SQL Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>Python Tutorial</h2>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
</body>
</html>

巢狀計數器

計數器可以巢狀以建立更復雜的編號方案。您可以使用counters() 函式來顯示巢狀計數器的值。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        ol {
            counter-reset: section;
            list-style-type: none;
        }
        li::before {
            counter-increment: section;
            content: counters(section, ".") " ";
        }
    </style>
</head>

<body>
    <ol>
        <li>Section 1
            <ol>
                <li>Subsection 1.1</li>
                <li>Subsection 1.2</li>
                <li>Subsection 1.3</li>
            </ol>
        </li>

        <li>Section 2
            <ol>
                <li>Subsection 2.1</li>
                <li>Subsection 2.2</li>
                <li>Subsection 2.3</li>
            </ol>
        </li>

        <li>Section 3
            <ol>
                <li>Subsection 3.1</li>
                <li>Subsection 3.2</li>
                <li>Subsection 3.3</li>
            </ol>
        </li>
    </ol>
</body>

</html>

反向計數器

反向計數器是一種特殊的計數器，它向後計數而不是向前計數。要建立反向計數器，在使用 counter-reset 設定它時，使用 reversed() 函式命名它。

body{
    counter-reset: reversed(section);
}

反向計數器從等於元素數量的預設初始值開始，而不是零。這意味著它可以簡單地從元素數量倒數到一。

反向計數器屬性僅受 Firefox 瀏覽器支援

示例

在 Firefox 瀏覽器中嘗試此操作

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            counter-reset: reversed(
            section);
        }
        p::before {
            counter-increment: section -1;
            content: "Section " counter(section) ": "; 
        }
    </style>
</head>

<body>
    <p>This is fourth paragraph</p>
    <p>This is Third paragraph</p>
    <p>This is second paragraph</p>
    <p>This is first paragraph</p>
</body>

</html>

以下是計數器的 CSS 屬性列表

屬性	描述	示例
counter-reset	用於建立或重置計數器。	試試看
counter-set	用於將計數器設定為特定值。	試試看
counter-increment	用於遞增計數器的值。	試試看
counter()	提供一個表示命名計數器當前值的字串。	試試看
counters()	用於處理巢狀計數器。	試試看
@counter-styles	用於建立自定義計數器樣式。	試試看

列印頁面

CSS - 計數器

目錄

如何在 CSS 中實現計數器？

使用計數器進行自動編號

示例

巢狀計數器

示例

反向計數器

示例

CSS 計數器相關屬性