使用 CSS 計數器

Domin發表於2018-03-23
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目錄序號自動遞增)詳解》。

相關文章