css計數器（counter）是什麼
- 青灯夜游原創
- 2018-11-26 11:45:393800瀏覽
這篇文章帶給大家的內容是介紹css計數器（counter）是什麼，讓大家簡單的了解css計數器的相關屬性。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
css計數器是什麼？
計數器是css3提供的一個強大的工具，是一種可以讓我們使用CSS為元素自動編號的方法。使用它可以很方便地對頁面中的任意元素進行計數，實現類似於有序列表的功能。但與有序列表相比，css計數器可以對任意元素進行計數，同時還可以實現個人化計數。 【相關影片教學推薦：CSS3教學】
css計數器的相關屬性
##1、counter -reset
counter-reset屬性用於定義和初始化一個或多個CSS計數器。它可以使用一個或多個標識符作為值，該值指定計數器的名稱。 使用語法：counter-reset: [ <标识符> <整数>? ]+ | none | inherit每個計數器名稱後面都可以跟著一個可選的值，該值指定計數器的初始值。 注意：1）、關鍵字none，inherit和initial不能當計數器名稱；關鍵字none，inherit可以當作計counter-reset屬性的值。
someSelector{
counter-reset: counterA; /*计数器counterA 初始，初始值为0*/
counter-reset: counterA 6; /*计数器counterA 初始，初始值为6*/
counter-reset: counterA 4 counterB; /*计数器counterA 初始，初始值为4，计数器counterB 初始，初始值为0*/
counter-reset: counterA 4 counterB 2; /*计数器counterA 初始，初始值为4，计数器counterB 初始，初始值为2*/
}
2、counter-increment
#counter-increment屬性用於指定一個或多個CSS計數器的增量值。它將一個或多個識別碼作為值，指定要遞增的計數器的名稱。 使用語法：counter-increment: [ <标识符> <整数>? ]+ | none | inherit每個計數器名稱（識別碼）後面都可以跟一個可選值，該值指定對於我們所編號的元素每次出現時，計數器需要遞增多少。預設增量為1。允許零和負整數。如果指定了負整數，則計數器被遞減。 counter-increment屬性必須和counter-reset屬性搭配使用，下面我們來看看範例：
article { /* 定义和初始化计数器 */
counter-reset: section; /* 'section' 是计数器的名称 */
}
article h2 { /* 每出现一次h2,计数器就增加1 */
counter-increment: section; /* 相当于计数器增量：第1节； */
}
3、counter()函數
counter()函數必須和content屬性一起使用，用來顯示CSS計數器。它以CSS計數器名稱作為參數，並作為值傳遞給content屬性，而content屬性就會使用:before偽元素將計數器顯示為產生的內容。 範例：h2:before {
content: counter(section);
}counter()函數有兩種形式：counter(name)和counter(name, style)。 name參數就是要顯示的計數器的名稱；使用counter-reset屬性就可以指定計數器的名稱。 style參數是用來定義計數器的風格。預設情況下，計數器使用十進位數字格式化 ， 也就是說，計數器會以數字的形式產生 內容；但其實，css list-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字元顯示計數器的範例：ul li: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字符显示，并使用点作为分隔符：
ul li:before {
content: counters(my-counter, ".", lower-roman);
}css计数器（counter）的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tester</title>
<style type="text/css">
body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment: section;
content: counter(section) ".";
}
h3:before{
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>css计数器教程</h1>
<h3>css计数器</h3>
<h3>css计数器的相关属性</h3>
<h3>示例说明</h3>
<h1>css计数器教程</h1>
<h3>css计数器</h3>
<h3>css计数器的相关属性</h3>
<h3>示例说明</h3>
</body>
</html>效果图：
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。
以上是css計數器（counter）是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！