亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

使用 CSS 計數(shù)器

guqiu / 1149人閱讀

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

使用 CSS 計數(shù)器

CSS 計數(shù)器本質(zhì)上是 CSS 維護的變量，這些變量可以根據(jù) CSS 規(guī)則增加以跟蹤使用次數(shù)。

那么關(guān)于 CSS 計數(shù)器的使用，就需要讀者智者見智了。有網(wǎng)友利用計數(shù)器制作文檔的列表序號排序，也有網(wǎng)友利用計數(shù)器 + 偽類元素制作更華麗的效果。

使用計數(shù)器 語法

1.命名變量并定義計數(shù)器的值，默認為 0。

counter-reset: varname;

遞增計數(shù)器的值，默認增量為 1。

counter-increment: varname;

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

counter(varname);
注意 
CSS 計數(shù)器只跟 content 屬性使用才有效。
相關(guān)用法 如何自定義 counter-reset 默認值 
counter-reset: varname number;
允許設置為負值，也允許設置為小數(shù)（ 僅 Chrome 支持）。同時，也支持多個變量同時定義：
counter-reset: varname1 number varname2 number varname3 number;
參考代碼 點擊按鈕計數(shù)

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);
}
結(jié)語

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115870.html

相關(guān)文章

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

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

    I_Am 評論0 收藏0

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

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

    waltr 評論0 收藏0

  • 偽元素 ::after 和 ::before 應該這么用（一）

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

    BlackMass 評論0 收藏0

  • 帶你了解css計數(shù)器——counters

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

    fuyi501 評論0 收藏0

  • CSS魔法堂：一起玩透偽元素和Content屬性

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

    DevTalking 評論0 收藏0

發(fā)表評論

0條評論

guqiu

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<