css計(jì)數(shù)器怎么使用

本文小編為大家詳細(xì)介紹“css計(jì)數(shù)器怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css計(jì)數(shù)器怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

　　css計(jì)數(shù)器是什么？

　　計(jì)數(shù)器是css3提供的一個(gè)強(qiáng)大的工具，是一種可以讓我們使用CSS給元素自動(dòng)編號的方法。使用它可以很方便對頁面中的任意元素進(jìn)行計(jì)數(shù)，實(shí)現(xiàn)類似于有序列表的功能。但與有序列表相比，css計(jì)數(shù)器可以對任意元素計(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)識符作為值，該值指定計(jì)數(shù)器的名稱。

　　使用語法：

　　counter-reset:[<標(biāo)識符><整數(shù)>?]+|none|inherit

　　每個(gè)計(jì)數(shù)器名稱后面都可以跟一個(gè)可選的<整數(shù)>值，該值指定計(jì)數(shù)器的初始值。

　　注意：

　　1）、關(guān)鍵字none，inherit和initial不能作為計(jì)數(shù)器名稱；關(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開始顯示，則需要將counter-reset中的初始值設(shè)置為零。0是默認(rèn)的初始值，所以如果省略它，默認(rèn)情況下它將重置為零；counter-reset允許使用負(fù)值。因此，如果希望計(jì)數(shù)器從零開始顯示，可以將其初始值設(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)識符作為值，指定要遞增的計(jì)數(shù)器的名稱。

　　使用語法：

　　counter-increment:[<標(biāo)識符><整數(shù)>?]+|none|inherit

　　每個(gè)計(jì)數(shù)器名稱（標(biāo)識符）后面都可以跟一個(gè)可選<整數(shù)>值，該值指定對于我們所編號的元素每次出現(xiàn)時(shí)，計(jì)數(shù)器需要遞增多少。默認(rèn)增量為1。允許零和負(fù)整數(shù)。如果指定了負(fù)整數(shù)，則計(jì)數(shù)器被遞減。

　　counter-increment屬性必須和counter-reset屬性配合使用，下面我們來看看示例：

　　article{/*定義和初始化計(jì)數(shù)器*/

　　counter-reset:section;/*'section'是計(jì)數(shù)器的名稱*/

　　}

　　articleh3{/*每出現(xiàn)一次h3,計(jì)數(shù)器就增加1*/

　　counter-increment:section;/*相當(dāng)于計(jì)數(shù)器增量：第1節(jié)；*/

　　}

　　3、counter()函數(shù)

　　counter()函數(shù)必須和content屬性一起使用，用來顯示CSS計(jì)數(shù)器。它以CSS計(jì)數(shù)器名稱作為參數(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ù)器的名稱；使用counter-reset屬性就可以指定計(jì)數(shù)器的名稱。

　　style參數(shù)是用來定義計(jì)數(shù)器的風(fēng)格。默認(rèn)情況下，計(jì)數(shù)器使用十進(jìn)制數(shù)字格式化，也就是說，計(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：小寫羅馬數(shù)字樣式

　　upper-roman：大寫羅馬數(shù)字樣式

　　lower-alpha：小寫英文字母樣式

　　upper-alpha：大寫英文字母樣式

　　none：不使用項(xiàng)目符號

　　armenianl：傳統(tǒng)的亞美尼亞數(shù)字樣式

　　cjk-ideographic：淺白的表意數(shù)字樣式

　　georgian：傳統(tǒng)的喬治數(shù)字樣式

　　lower-greek：基本的希臘小寫字母樣式

　　hebrew：傳統(tǒng)的希伯萊數(shù)字樣式

　　hiragana：日文平假名字符樣式

　　hiragana-iroha：日文平假名序號樣式

　　katakana：日文片假名字符樣式

　　katakana-iroha：日文片假名序號樣式

　　lower-latin：小寫拉丁字母樣式

　　upper-latin：大寫拉丁字母樣式

　　以下是指定使用lower-roman字符顯示計(jì)數(shù)器的示例：

　　ulli:before{

　　content:counter(my-counter,lower-roman);

　　}

　　4、counters()函數(shù)

　　counters()函數(shù)也必須和content屬性一起使用，用來顯示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ù)器的名稱?？梢允褂胏ounter-reset屬性來指定計(jì)數(shù)器的名稱。

　　而counters()函數(shù)與counter(）函數(shù)（單數(shù)形式）區(qū)別在于：counters()函數(shù)可以用于設(shè)置嵌套計(jì)數(shù)器。

　　嵌套計(jì)數(shù)器是用于為嵌套元素（如嵌套列表）提供自動(dòng)編號。如果您要將計(jì)數(shù)器應(yīng)用于嵌套列表，則可以對第一級項(xiàng)目進(jìn)行編號，例如，1，2，3等。第二級列表項(xiàng)目將編號為1.1，1.2，1.3等。第三級項(xiàng)目將是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。

　　string參數(shù)用作不同嵌套級別的數(shù)字之間的分隔符。例如，在'1.1.2'中，點(diǎn)（'.'）用于分隔不同的級別編號。如果我們使用該counters()函數(shù)將點(diǎn)指定為分隔符，則它可能如下所示：

　　content:counters(counterName,".");

　　如果希望嵌套計(jì)數(shù)器由另一個(gè)字符分隔，例如，如果希望它們顯示為“1-1-2”，則可以使用短劃線而不是點(diǎn)作為字符串值：

　　content:counters(counterName,"-");

　　和counter(）函數(shù)一樣，style參數(shù)是用來定義計(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）的示例：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8"/>

　　<title>Tester</title>

　　<styletype="text/css">

　　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)"";

　　}

　　</style>

　　</head>

　　<body>

　　<h2>css計(jì)數(shù)器教程</h2>

　　<h4>css計(jì)數(shù)器</h4>

　　<h4>css計(jì)數(shù)器的相關(guān)屬性</h4>

　　<h4>示例說明</h4>

　　<h2>css計(jì)數(shù)器教程</h2>

　　<h4>css計(jì)數(shù)器</h4>

　　<h4>css計(jì)數(shù)器的相關(guān)屬性</h4>

　　<h4>示例說明</h4>

　　</body>

　　</html>

讀到這里，這篇“css計(jì)數(shù)器怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。