css計數(shù)器指的是什么

發(fā)布時間：2020-12-07 13:00:57 來源：億速云閱讀：124 作者：小新欄目：web開發(fā)

這篇文章主要介紹css計數(shù)器指的是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

計數(shù)器是css3提供的一個強大的工具，是一種可以讓我們使用CSS給元素自動編號的方法。使用它可以很方便對頁面中的任意元素進行計數(shù)，實現(xiàn)類似于有序列表的功能。但與有序列表相比，css計數(shù)器可以對任意元素計數(shù)，同時還可以實現(xiàn)個性化計數(shù)。

css計數(shù)器的相關(guān)屬性

1、counter-reset

counter-reset屬性用于定義和初始化一個或多個CSS計數(shù)器。它可以使用一個或多個標識符作為值，該值指定計數(shù)器的名稱。

使用語法：

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

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

注意：

1）、關(guān)鍵字none，inherit和initial不能作為計數(shù)器名稱；關(guān)鍵字none，inherit可以作為計counter-reset屬性的值。

設置none將取消設置計數(shù)器；設置inherit將從元素的父元素處繼承counter-reset值。該counter-reset屬性的默認值為none。

2）、計數(shù)器的初始值不是計數(shù)器顯示時的第一個數(shù)字/值。

這意味著如果希望計數(shù)器從1開始顯示，則需要將counter-reset中的初始值設置為零。0是默認的初始值，所以如果省略它，默認情況下它將重置為零；counter-reset允許使用負值。因此，如果希望計數(shù)器從零開始顯示，可以將其初始值設置為-1。

示例：

someSelector{ 
    counter-reset: counterA;  /*計數(shù)器counterA 初始，初始值為0*/ 
    counter-reset: counterA 6;  /*計數(shù)器counterA 初始，初始值為6*/ 
    counter-reset: counterA 4 counterB;  /*計數(shù)器counterA 初始，初始值為4，計數(shù)器counterB  初始，初始值為0*/ 
    counter-reset: counterA 4 counterB 2;  /*計數(shù)器counterA 初始，初始值為4，計數(shù)器counterB 初始，初始值為2*/ 
}

2、counter-increment

counter-increment屬性用于指定一個或多個CSS計數(shù)器的增量值。它將一個或多個標識符作為值，指定要遞增的計數(shù)器的名稱。

使用語法：

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

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

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

article {    /* 定義和初始化計數(shù)器 */
    counter-reset: section; /* 'section' 是計數(shù)器的名稱 */
}
article h3 {    /* 每出現(xiàn)一次h3,計數(shù)器就增加1 */
    counter-increment: section; /* 相當于計數(shù)器增量：第1節(jié)； */
}

3、counter()函數(shù)

counter()函數(shù)必須和content屬性一起使用，用來顯示CSS計數(shù)器。它以CSS計數(shù)器名稱作為參數(shù)，并作為值傳遞給content屬性，而content屬性就會使用:before偽元素將計數(shù)器顯示為生成的內(nèi)容。

例：

h3:before {    
    content: counter(section);
}

counter()函數(shù)有兩種形式：counter(name)和counter(name, style)。

name參數(shù)就是要顯示的計數(shù)器的名稱；使用counter-reset屬性就可以指定計數(shù)器的名稱。

style參數(shù)是用來定義計數(shù)器的風格。默認情況下，計數(shù)器使用十進制數(shù)字格式化，也就是說，計數(shù)器會以數(shù)字的形式生成內(nèi)容；但其實，css list-style-type屬性的所有可用樣式也可用于計數(shù)器。這意味著您可以創(chuàng)建十進制數(shù)字計數(shù)器，顯示為羅馬字符的計數(shù)器，低字母字符等。以下是所有可能的計數(shù)器樣式：

disc：實心圓樣式

circle：空心圓樣式

square：實心方塊樣式

decimal：阿拉伯數(shù)字樣式

lower-roman：小寫羅馬數(shù)字樣式

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

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

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

none：不使用項目符號

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字符顯示計數(shù)器的示例：

ul li:before {    
content: counter(my-counter, lower-roman);
}

4、counters()函數(shù)

counters()函數(shù)也必須和content屬性一起使用，用來顯示CSS計數(shù)器。和counter(）函數(shù)一樣，counters()函數(shù)也作為值傳遞給content屬性；然后，content屬性在使用:before偽元素將計數(shù)器顯示為生成的內(nèi)容。

counters()函數(shù)也有兩種形式：counters(name, string)和counters(name, string, style)。

name參數(shù)也是要顯示的計數(shù)器的名稱?？梢允褂胏ounter-reset屬性來指定計數(shù)器的名稱。

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

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

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

content: counters(counterName, ".");

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

content: counters(counterName, "-");

和counter(）函數(shù)一樣，style參數(shù)是用來定義計數(shù)器的風格。默認情況下，計數(shù)器使用十進制數(shù)字格式化。具體關(guān)于style參數(shù)的設置可以參照counter(）函數(shù)的style參數(shù)。

以下是一個示例，指定嵌套計數(shù)器將使用lower-roman字符顯示，并使用點作為分隔符：

ul li:before {    
   content: counters(my-counter, ".", lower-roman);
}

css計數(shù)器（counter）的示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Tester</title>
        <style type="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計數(shù)器教程</h2>
        <h4>css計數(shù)器</h4>
        <h4>css計數(shù)器的相關(guān)屬性</h4>
        <h4>示例說明</h4>
         
        <h2>css計數(shù)器教程</h2>
        <h4>css計數(shù)器</h4>
        <h4>css計數(shù)器的相關(guān)屬性</h4>
        <h4>示例說明</h4>
    </body>
</html>

效果圖：

css計數(shù)器指的是什么

以上是“css計數(shù)器指的是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

css計數(shù)器指的是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽