使用 CSS 計數器

guqiu 發布于2019-08-30 14:14 / 1076人閱讀

摘要：使用計數器計數器本質上是維護的變量，這些變量可以根據規則增加以跟蹤使用次數。有網友利用計數器制作文檔的列表序號排序，也有網友利用計數器偽類元素制作更華麗的效果。使用計數器語法命名變量并定義計數器的值，默認為。注意計數器只跟屬性使用才有效。

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

CSS

.box
{
    counter-reset: num;
}

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

文章序號自動遞增

HTML


    文章目錄標題1
    文章目錄標題2
    文章目錄標題3
    文章目錄標題4
    文章目錄標題5

CSS

.box
{
    counter-reset: num;
}

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

文章序號嵌套遞增

HTML


    文章目錄標題
        文章目錄副標題
    文章目錄標題
        文章目錄副標題
        文章目錄副標題
    文章目錄標題
        文章目錄副標題
        文章目錄副標題
        文章目錄副標題
    文章目錄標題
        文章目錄副標題
        文章目錄副標題
        文章目錄副標題
        文章目錄副標題
    文章目錄標題
        文章目錄副標題
        文章目錄副標題
        文章目錄副標題
        文章目錄副標題
        文章目錄副標題

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目錄序號自動遞增)詳解》。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115870.html

如何使用純 CSS 制作四子連珠游戲

摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對決這是一篇非常有趣的文章，作者詳細講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關鍵思想。序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對決！這是一篇非常有趣的文章，作者詳細講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...

I_Am 2019-08-02 16:05 評論0 收藏0
如何使用純 CSS 制作四子連珠游戲

摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對決這是一篇非常有趣的文章，作者詳細講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關鍵思想。序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對決！這是一篇非常有趣的文章，作者詳細講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...

waltr 2019-08-29 16:43 評論0 收藏0
偽元素 ::after 和 ::before 應該這么用（一）

摘要：偽元素被當做的樣式來進行展現，用法和普通的元素用法是一樣的。中的偽元素使用個冒號，在中，為了區分偽類和偽元素，規定偽元素使用個冒號。偽元素的特點優點不占用節點，減少節點數。不僅塊級元素可以設置偽元素，大部分行級元素也可以。 1 什么是偽元素？ CSS 在渲染文檔的時候，偽元素可以通過 css 給 HTML 添加一個元素（叫標簽也行），這個元素在文檔樹中是找不到的。偽元素被當做 CSS ...

BlackMass 2019-08-30 15:54 評論0 收藏0
帶你了解css計數器——counters

摘要：語法格式，中的是和中元素所支持的的值，也就是你可以將顯示為羅馬數字則是表示可以使用指定的字符串將計數器連接起來。第一次了解到這個css是因為代碼高亮-prismj中行號顯示的實現。 showImg(https://segmentfault.com/img/remote/1460000011457180?w=348&h=244); 當時很好奇前面的行號是如何實現的，一探究竟原來非常簡單...

fuyi501 2019-08-30 15:53 評論0 收藏0
CSS魔法堂：一起玩透偽元素和Content屬性

摘要：前言繼上篇魔法堂稍稍深入偽類選擇器記錄完偽類后，我自然而然要向偽元素伸出魔掌的啦。和的注意事項默認必須設置屬性，否則一切都是無用功默認，就是和的內容無法被用戶選中的偽元素和偽類結合使用形如。前言 ?繼上篇《CSS魔法堂：稍稍深入偽類選擇器》記錄完偽類后，我自然而然要向偽元素伸出魔掌的啦^_^。本文講講述偽元素以及功能強大的Contet屬性，讓我們可以通過偽元素更好地實現更多的可能！ ...

DevTalking 2019-08-30 15:54 評論0 收藏0