css如何實(shí)現(xiàn)自動(dòng)編號(hào)

這篇文章主要為大家展示了“css如何實(shí)現(xiàn)自動(dòng)編號(hào)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css如何實(shí)現(xiàn)自動(dòng)編號(hào)”這篇文章吧。

　　一、自動(dòng)編號(hào)

　　在CSS2.1中的自動(dòng)編號(hào)由兩個(gè)屬性控制，它們分別為：“counter-increment”和“counter-reset”。由這些屬性定義的計(jì)數(shù)器（counter）與“content”屬性的counter()和counters()函數(shù)一起使用。

　　'counter-increment'

　　語(yǔ)法：

　　counter-increment：[<identifier><integer>?]+|none|inherit

　　說(shuō)明：

　　初始：沒(méi)有

　　適用于：所有元素

　　繼承：沒(méi)有

　　百分比：N/A

　　媒體：所有

　　計(jì)算值：作為指定

　　counter-increment'屬性接受的計(jì)數(shù)器（標(biāo)識(shí)符）的一個(gè)或多個(gè)名稱(chēng)，每一個(gè)名稱(chēng)可選地跟隨一個(gè)整數(shù)。整數(shù)表示每次出現(xiàn)元素時(shí)計(jì)數(shù)器的遞增程度，默認(rèn)增量為1，允許零和負(fù)整數(shù)。

　　'counter-reset'

　　語(yǔ)法：

　　counter-reset：[<identifier><integer>?]+|none|inherit

　　說(shuō)明：

　　初始：沒(méi)有

　　適用于：所有元素

　　繼承：沒(méi)有

　　百分比：N/A

　　媒體：所有

　　計(jì)算值：作為指定

　　counter-reset屬性包含計(jì)數(shù)器的一個(gè)或多個(gè)名稱(chēng)，每一個(gè)名稱(chēng)可選地任選地跟隨一個(gè)整數(shù)的列表。整數(shù)給出每次出現(xiàn)元素時(shí)計(jì)數(shù)器設(shè)置的值。默認(rèn)值為0。

　　注：關(guān)鍵字'none'，'inherit'和'initial'不得用作計(jì)數(shù)器名稱(chēng)；值'none'本身意味著沒(méi)有重置計(jì)數(shù)器，'inherit'本身具有其通常的含義（繼承），“initial”保留供將來(lái)使用。

　　例：顯示了使用“第1章”，“1.1”，“1.2”等對(duì)章節(jié)進(jìn)行編號(hào)的方法。

　　html代碼：

　　<h2>大標(biāo)題</h2>

　　<h3>小標(biāo)題1</h3>

　　<h3>小標(biāo)題2</h3>

　　css代碼：

　　body{

　　counter-reset:chapter;/*創(chuàng)建章節(jié)計(jì)數(shù)器范圍*/

　　}

　　h2:before{

　　content:"第"counter(chapter)"章、";

　　counter-increment:chapter;/*在章節(jié)中添加1*/

　　}

　　h2{

　　counter-reset:section;/*將部分設(shè)置為0*/

　　}

　　h3:before{

　　content:counter(chapter)"."counter(section)"";

　　counter-increment:section;

　　}

以上是“css如何實(shí)現(xiàn)自動(dòng)編號(hào)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！