溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“css計數器怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css計數器怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
css計數器是什么？
計數器是css3提供的一個強大的工具，是一種可以讓我們使用CSS給元素自動編號的方法。使用它可以很方便對頁面中的任意元素進行計數，實現類似于有序列表的功能。但與有序列表相比，css計數器可以對任意元素計數，同時還可以實現個性化計數。
css計數器的相關屬性
1、counter-reset
counter-reset屬性用于定義和初始化一個或多個CSS計數器。它可以使用一個或多個標識符作為值，該值指定計數器的名稱。
使用語法：
counter-reset:[<標識符><整數>?]+|none|inherit
每個計數器名稱后面都可以跟一個可選的<整數>值，該值指定計數器的初始值。
注意：
1）、關鍵字none，inherit和initial不能作為計數器名稱；關鍵字none，inherit可以作為計counter-reset屬性的值。
設置none將取消設置計數器；設置inherit將從元素的父元素處繼承counter-reset值。該counter-reset屬性的默認值為none。
2）、計數器的初始值不是計數器顯示時的第一個數字/值。
這意味著如果希望計數器從1開始顯示，則需要將counter-reset中的初始值設置為零。0是默認的初始值，所以如果省略它，默認情況下它將重置為零；counter-reset允許使用負值。因此，如果希望計數器從零開始顯示，可以將其初始值設置為-1。
示例：
someSelector{
counter-reset:counterA;/*計數器counterA初始，初始值為0*/
counter-reset:counterA6;/*計數器counterA初始，初始值為6*/
counter-reset:counterA4counterB;/*計數器counterA初始，初始值為4，計數器counterB初始，初始值為0*/
counter-reset:counterA4counterB2;/*計數器counterA初始，初始值為4，計數器counterB初始，初始值為2*/
}
2、counter-increment
counter-increment屬性用于指定一個或多個CSS計數器的增量值。它將一個或多個標識符作為值，指定要遞增的計數器的名稱。
使用語法：
counter-increment:[<標識符><整數>?]+|none|inherit
每個計數器名稱（標識符）后面都可以跟一個可選<整數>值，該值指定對于我們所編號的元素每次出現時，計數器需要遞增多少。默認增量為1。允許零和負整數。如果指定了負整數，則計數器被遞減。
counter-increment屬性必須和counter-reset屬性配合使用，下面我們來看看示例：
article{/*定義和初始化計數器*/
counter-reset:section;/*'section'是計數器的名稱*/
}
articleh3{/*每出現一次h3,計數器就增加1*/
counter-increment:section;/*相當于計數器增量：第1節；*/
}
3、counter()函數
counter()函數必須和content屬性一起使用，用來顯示CSS計數器。它以CSS計數器名稱作為參數，并作為值傳遞給content屬性，而content屬性就會使用:before偽元素將計數器顯示為生成的內容。
例：
h3:before{
content:counter(section);
}
counter()函數有兩種形式：counter(name)和counter(name,style)。
name參數就是要顯示的計數器的名稱；使用counter-reset屬性就可以指定計數器的名稱。
style參數是用來定義計數器的風格。默認情況下，計數器使用十進制數字格式化，也就是說，計數器會以數字的形式生成內容；但其實，csslist-style-type屬性的所有可用樣式也可用于計數器。這意味著您可以創建十進制數字計數器，顯示為羅馬字符的計數器，低字母字符等。以下是所有可能的計數器樣式：
disc：實心圓樣式
circle：空心圓樣式
square：實心方塊樣式
decimal：阿拉伯數字樣式
lower-roman：小寫羅馬數字樣式
upper-roman：大寫羅馬數字樣式
lower-alpha：小寫英文字母樣式
upper-alpha：大寫英文字母樣式
none：不使用項目符號
armenianl：傳統的亞美尼亞數字樣式
cjk-ideographic：淺白的表意數字樣式
georgian：傳統的喬治數字樣式
lower-greek：基本的希臘小寫字母樣式
hebrew：傳統的希伯萊數字樣式
hiragana：日文平假名字符樣式
hiragana-iroha：日文平假名序號樣式
katakana：日文片假名字符樣式
katakana-iroha：日文片假名序號樣式
lower-latin：小寫拉丁字母樣式
upper-latin：大寫拉丁字母樣式
以下是指定使用lower-roman字符顯示計數器的示例：
ulli:before{
content:counter(my-counter,lower-roman);
}
4、counters()函數
counters()函數也必須和content屬性一起使用，用來顯示CSS計數器。和counter(）函數一樣，counters()函數也作為值傳遞給content屬性；然后，content屬性在使用:before偽元素將計數器顯示為生成的內容。
counters()函數也有兩種形式：counters(name,string)和counters(name,string,style)。
name參數也是要顯示的計數器的名稱。可以使用counter-reset屬性來指定計數器的名稱。
而counters()函數與counter(）函數（單數形式）區別在于：counters()函數可以用于設置嵌套計數器。
嵌套計數器是用于為嵌套元素（如嵌套列表）提供自動編號。如果您要將計數器應用于嵌套列表，則可以對第一級項目進行編號，例如，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參數用作不同嵌套級別的數字之間的分隔符。例如，在'1.1.2'中，點（'.'）用于分隔不同的級別編號。如果我們使用該counters()函數將點指定為分隔符，則它可能如下所示：
content:counters(counterName,".");
如果希望嵌套計數器由另一個字符分隔，例如，如果希望它們顯示為“1-1-2”，則可以使用短劃線而不是點作為字符串值：
content:counters(counterName,"-");
和counter(）函數一樣，style參數是用來定義計數器的風格。默認情況下，計數器使用十進制數字格式化。具體關于style參數的設置可以參照counter(）函數的style參數。
以下是一個示例，指定嵌套計數器將使用lower-roman字符顯示，并使用點作為分隔符：
ulli:before{
content:counters(my-counter,".",lower-roman);
}
css計數器（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計數器教程</h2>
<h4>css計數器</h4>
<h4>css計數器的相關屬性</h4>
<h4>示例說明</h4>
<h2>css計數器教程</h2>
<h4>css計數器</h4>
<h4>css計數器的相關屬性</h4>
<h4>示例說明</h4>
</body>
</html>
讀到這里，這篇“css計數器怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
