成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用 CSS 計(jì)數(shù)器

guqiu / 1082人閱讀

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

使用 CSS 計(jì)數(shù)器

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

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

使用計(jì)數(shù)器 語法

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

counter-reset: varname;

遞增計(jì)數(shù)器的值，默認(rèn)增量為 1。

counter-increment: varname;

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

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

HTML

CSS

.box
{
    counter-reset: num;
}

input:checked
{
    counter-increment: num;
}
input:checked:before
{
    content: counter(num);
}
文章序號(hào)自動(dòng)遞增

HTML


    
文章目錄標(biāo)題1

    
文章目錄標(biāo)題2

    
文章目錄標(biāo)題3

    
文章目錄標(biāo)題4

    
文章目錄標(biāo)題5

CSS

.box
{
    counter-reset: num;
}

h1
{
    counter-increment: num;
}
h1:before
{
    content: counter(num);
}
文章序號(hào)嵌套遞增

HTML


    
文章目錄標(biāo)題

        
文章目錄副標(biāo)題

    
文章目錄標(biāo)題

        
文章目錄副標(biāo)題

        
文章目錄副標(biāo)題

    
文章目錄標(biāo)題

        
文章目錄副標(biāo)題

        
文章目錄副標(biāo)題

        
文章目錄副標(biāo)題

    
文章目錄標(biāo)題

        
文章目錄副標(biāo)題

        
文章目錄副標(biāo)題

        
文章目錄副標(biāo)題

        
文章目錄副標(biāo)題

    
文章目錄標(biāo)題

        
文章目錄副標(biāo)題

        
文章目錄副標(biāo)題

        
文章目錄副標(biāo)題

        
文章目錄副標(biāo)題

        
文章目錄副標(biāo)題

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é)語

在上面的案例及分享中，其實(shí)講到的東西非常少。想要更深了解 CSS 計(jì)數(shù)器的讀者，可以閱讀張?chǎng)涡裣壬@篇《CSS counter計(jì)數(shù)器(content目錄序號(hào)自動(dòng)遞增)詳解》。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115870.html

相關(guān)文章

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

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

    I_Am 評(píng)論0 收藏0

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

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

    waltr 評(píng)論0 收藏0

  • 偽元素 ::after 和 ::before 應(yīng)該這么用（一）

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

    BlackMass 評(píng)論0 收藏0

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

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

    fuyi501 評(píng)論0 收藏0

  • CSS魔法堂：一起玩透?jìng)卧睾虲ontent屬性

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

    DevTalking 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

guqiu

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<