本文小編為大家詳細(xì)介紹“css計(jì)數(shù)器怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css計(jì)數(shù)器怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。
創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的墊江網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
css計(jì)數(shù)器是什么？
計(jì)數(shù)器是css3提供的一個(gè)強(qiáng)大的工具，是一種可以讓我們使用CSS給元素自動(dòng)編號(hào)的方法。使用它可以很方便對(duì)頁(yè)面中的任意元素進(jìn)行計(jì)數(shù)，實(shí)現(xiàn)類(lèi)似于有序列表的功能。但與有序列表相比，css計(jì)數(shù)器可以對(duì)任意元素計(jì)數(shù)，同時(shí)還可以實(shí)現(xiàn)個(gè)性化計(jì)數(shù)。
css計(jì)數(shù)器的相關(guān)屬性
1、counter-reset
counter-reset屬性用于定義和初始化一個(gè)或多個(gè)CSS計(jì)數(shù)器。它可以使用一個(gè)或多個(gè)標(biāo)識(shí)符作為值，該值指定計(jì)數(shù)器的名稱(chēng)。
使用語(yǔ)法：
counter-reset:[<標(biāo)識(shí)符><整數(shù)>?]+|none|inherit
每個(gè)計(jì)數(shù)器名稱(chēng)后面都可以跟一個(gè)可選的<整數(shù)>值，該值指定計(jì)數(shù)器的初始值。
注意：
1）、關(guān)鍵字none，inherit和initial不能作為計(jì)數(shù)器名稱(chēng)；關(guān)鍵字none，inherit可以作為計(jì)counter-reset屬性的值。
設(shè)置none將取消設(shè)置計(jì)數(shù)器；設(shè)置inherit將從元素的父元素處繼承counter-reset值。該counter-reset屬性的默認(rèn)值為none。
2）、計(jì)數(shù)器的初始值不是計(jì)數(shù)器顯示時(shí)的第一個(gè)數(shù)字/值。
這意味著如果希望計(jì)數(shù)器從1開(kāi)始顯示，則需要將counter-reset中的初始值設(shè)置為零。0是默認(rèn)的初始值，所以如果省略它，默認(rèn)情況下它將重置為零；counter-reset允許使用負(fù)值。因此，如果希望計(jì)數(shù)器從零開(kāi)始顯示，可以將其初始值設(shè)置為-1。
示例：
someSelector{
counter-reset:counterA;/*計(jì)數(shù)器counterA初始，初始值為0*/
counter-reset:counterA6;/*計(jì)數(shù)器counterA初始，初始值為6*/
counter-reset:counterA4counterB;/*計(jì)數(shù)器counterA初始，初始值為4，計(jì)數(shù)器counterB初始，初始值為0*/
counter-reset:counterA4counterB2;/*計(jì)數(shù)器counterA初始，初始值為4，計(jì)數(shù)器counterB初始，初始值為2*/
}
2、counter-increment
counter-increment屬性用于指定一個(gè)或多個(gè)CSS計(jì)數(shù)器的增量值。它將一個(gè)或多個(gè)標(biāo)識(shí)符作為值，指定要遞增的計(jì)數(shù)器的名稱(chēng)。
使用語(yǔ)法：
counter-increment:[<標(biāo)識(shí)符><整數(shù)>?]+|none|inherit
每個(gè)計(jì)數(shù)器名稱(chēng)（標(biāo)識(shí)符）后面都可以跟一個(gè)可選<整數(shù)>值，該值指定對(duì)于我們所編號(hào)的元素每次出現(xiàn)時(shí)，計(jì)數(shù)器需要遞增多少。默認(rèn)增量為1。允許零和負(fù)整數(shù)。如果指定了負(fù)整數(shù)，則計(jì)數(shù)器被遞減。
counter-increment屬性必須和counter-reset屬性配合使用，下面我們來(lái)看看示例：
article{/*定義和初始化計(jì)數(shù)器*/
counter-reset:section;/*'section'是計(jì)數(shù)器的名稱(chēng)*/
}
articleh3{/*每出現(xiàn)一次h3,計(jì)數(shù)器就增加1*/
counter-increment:section;/*相當(dāng)于計(jì)數(shù)器增量：第1節(jié)；*/
}
3、counter()函數(shù)
counter()函數(shù)必須和content屬性一起使用，用來(lái)顯示CSS計(jì)數(shù)器。它以CSS計(jì)數(shù)器名稱(chēng)作為參數(shù)，并作為值傳遞給content屬性，而content屬性就會(huì)使用:before偽元素將計(jì)數(shù)器顯示為生成的內(nèi)容。
例：
h3:before{
content:counter(section);
}
counter()函數(shù)有兩種形式：counter(name)和counter(name,style)。
name參數(shù)就是要顯示的計(jì)數(shù)器的名稱(chēng)；使用counter-reset屬性就可以指定計(jì)數(shù)器的名稱(chēng)。
style參數(shù)是用來(lái)定義計(jì)數(shù)器的風(fēng)格。默認(rèn)情況下，計(jì)數(shù)器使用十進(jìn)制數(shù)字格式化，也就是說(shuō)，計(jì)數(shù)器會(huì)以數(shù)字的形式生成內(nèi)容；但其實(shí)，csslist-style-type屬性的所有可用樣式也可用于計(jì)數(shù)器。這意味著您可以創(chuàng)建十進(jìn)制數(shù)字計(jì)數(shù)器，顯示為羅馬字符的計(jì)數(shù)器，低字母字符等。以下是所有可能的計(jì)數(shù)器樣式：
disc：實(shí)心圓樣式
circle：空心圓樣式
square：實(shí)心方塊樣式
decimal：阿拉伯?dāng)?shù)字樣式
lower-roman：小寫(xiě)羅馬數(shù)字樣式
upper-roman：大寫(xiě)羅馬數(shù)字樣式
lower-alpha：小寫(xiě)英文字母樣式
upper-alpha：大寫(xiě)英文字母樣式
none：不使用項(xiàng)目符號(hào)
armenianl：傳統(tǒng)的亞美尼亞數(shù)字樣式
cjk-ideographic：淺白的表意數(shù)字樣式
georgian：傳統(tǒng)的喬治數(shù)字樣式
lower-greek：基本的希臘小寫(xiě)字母樣式
hebrew：傳統(tǒng)的希伯萊數(shù)字樣式
hiragana：日文平假名字符樣式
hiragana-iroha：日文平假名序號(hào)樣式
katakana：日文片假名字符樣式
katakana-iroha：日文片假名序號(hào)樣式
lower-latin：小寫(xiě)拉丁字母樣式
upper-latin：大寫(xiě)拉丁字母樣式
以下是指定使用lower-roman字符顯示計(jì)數(shù)器的示例：
ulli:before{
content:counter(my-counter,lower-roman);
}
4、counters()函數(shù)
counters()函數(shù)也必須和content屬性一起使用，用來(lái)顯示CSS計(jì)數(shù)器。和counter(）函數(shù)一樣，counters()函數(shù)也作為值傳遞給content屬性；然后，content屬性在使用:before偽元素將計(jì)數(shù)器顯示為生成的內(nèi)容。
counters()函數(shù)也有兩種形式：counters(name,string)和counters(name,string,style)。
name參數(shù)也是要顯示的計(jì)數(shù)器的名稱(chēng)。可以使用counter-reset屬性來(lái)指定計(jì)數(shù)器的名稱(chēng)。
而counters()函數(shù)與counter(）函數(shù)（單數(shù)形式）區(qū)別在于：counters()函數(shù)可以用于設(shè)置嵌套計(jì)數(shù)器。
嵌套計(jì)數(shù)器是用于為嵌套元素（如嵌套列表）提供自動(dòng)編號(hào)。如果您要將計(jì)數(shù)器應(yīng)用于嵌套列表，則可以對(duì)第一級(jí)項(xiàng)目進(jìn)行編號(hào)，例如，1，2，3等。第二級(jí)列表項(xiàng)目將編號(hào)為1.1，1.2，1.3等。第三級(jí)項(xiàng)目將是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。
string參數(shù)用作不同嵌套級(jí)別的數(shù)字之間的分隔符。例如，在'1.1.2'中，點(diǎn)（'.'）用于分隔不同的級(jí)別編號(hào)。如果我們使用該counters()函數(shù)將點(diǎn)指定為分隔符，則它可能如下所示：
content:counters(counterName,".");
如果希望嵌套計(jì)數(shù)器由另一個(gè)字符分隔，例如，如果希望它們顯示為“1-1-2”，則可以使用短劃線(xiàn)而不是點(diǎn)作為字符串值：
content:counters(counterName,"-");
和counter(）函數(shù)一樣，style參數(shù)是用來(lái)定義計(jì)數(shù)器的風(fēng)格。默認(rèn)情況下，計(jì)數(shù)器使用十進(jìn)制數(shù)字格式化。具體關(guān)于style參數(shù)的設(shè)置可以參照counter(）函數(shù)的style參數(shù)。
以下是一個(gè)示例，指定嵌套計(jì)數(shù)器將使用lower-roman字符顯示，并使用點(diǎn)作為分隔符：
ulli:before{
content:counters(my-counter,".",lower-roman);
}
css計(jì)數(shù)器（counter）的示例：
body{
counter-reset:section;
}
h2{
counter-reset:subsection;
}
h2:before{
counter-increment:section;
content:counter(section)".";
}
h4:before{
counter-increment:subsection;
content:counter(section)"."counter(subsection)"";
}
讀到這里，這篇“css計(jì)數(shù)器怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
