使用 CSS 計數器

使用 CSS 計數器

CSS 計數器本質上是 CSS 維護的變量，這些變量能夠根據 CSS 規則增長以跟蹤使用次數。

那麼關於 CSS 計數器的使用，就須要讀者智者見智了。有網友利用計數器製做文檔的列表序號排序，也有網友利用計數器 + 僞類元素製做更華麗的效果。

使用計數器

語法

1.命名變量並定義計數器的值，默認爲 0。

counter-reset: varname;

遞增計數器的值，默認增量爲 1。

counter-increment: varname;

counter() / counters() 方法顯示計數。

counter(varname);

注意

CSS 計數器只跟 content 屬性使用纔有效。

相關用法

如何自定義 counter-reset 默認值

counter-reset: varname number;

容許設置爲負值，也容許設置爲小數（ 僅 Chrome 支持）。同時，也支持多個變量同時定義：

counter-reset: varname1 number varname2 number varname3 number;

參考代碼

點擊按鈕計數

HTML

<div class="box">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

CSS

.box
{
    counter-reset: num;
}

input:checked
{
    counter-increment: num;
}
input:checked:before
{
    content: counter(num);
}

文章序號自動遞增

HTML

<div class="box">
    <h1>文章目錄標題1</h1>
    <h1>文章目錄標題2</h1>
    <h1>文章目錄標題3</h1>
    <h1>文章目錄標題4</h1>
    <h1>文章目錄標題5</h1>
</div>

CSS

.box
{
    counter-reset: num;
}

h1
{
    counter-increment: num;
}
h1:before
{
    content: counter(num);
}

文章序號嵌套遞增

HTML

<div class="box">
    <h1>文章目錄標題</h1>
        <h2>文章目錄副標題</h2>
    <h1>文章目錄標題</h1>
        <h2>文章目錄副標題</h2>
        <h2>文章目錄副標題</h2>
    <h1>文章目錄標題</h1>
        <h2>文章目錄副標題</h2>
        <h2>文章目錄副標題</h2>
        <h2>文章目錄副標題</h2>
    <h1>文章目錄標題</h1>
        <h2>文章目錄副標題</h2>
        <h2>文章目錄副標題</h2>
        <h2>文章目錄副標題</h2>
        <h2>文章目錄副標題</h2>
    <h1>文章目錄標題</h1>
        <h2>文章目錄副標題</h2>
        <h2>文章目錄副標題</h2>
        <h2>文章目錄副標題</h2>
        <h2>文章目錄副標題</h2>
        <h2>文章目錄副標題</h2>
</div>

CSS

.box
{
    counter-reset: num;
}

h1
{
    counter-reset: subnum;
    counter-increment: num;
}
h1:before
{
    content: counter(num);
}

h2
{
    counter-increment: subnum;
}
h2:before
{
    content: counter(num)"."counter(subnum);
}

結語

在上面的案例及分享中，其實講到的東西很是少。想要更深瞭解 CSS 計數器的讀者，能夠閱讀張鑫旭先生這篇《CSS counter計數器(content目錄序號自動遞增)詳解》。