css如何實現自動編號

這篇文章主要為大家展示了“css如何實現自動編號”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css如何實現自動編號”這篇文章吧。

　　一、自動編號

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

　　'counter-increment'

　　語法：

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

　　說明：

　　初始：沒有

　　適用于：所有元素

　　繼承：沒有

　　百分比：N/A

　　媒體：所有

　　計算值：作為指定

　　counter-increment'屬性接受的計數器（標識符）的一個或多個名稱，每一個名稱可選地跟隨一個整數。整數表示每次出現元素時計數器的遞增程度，默認增量為1，允許零和負整數。

　　'counter-reset'

　　語法：

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

　　說明：

　　初始：沒有

　　適用于：所有元素

　　繼承：沒有

　　百分比：N/A

　　媒體：所有

　　計算值：作為指定

　　counter-reset屬性包含計數器的一個或多個名稱，每一個名稱可選地任選地跟隨一個整數的列表。整數給出每次出現元素時計數器設置的值。默認值為0。

　　注：關鍵字'none'，'inherit'和'initial'不得用作計數器名稱；值'none'本身意味著沒有重置計數器，'inherit'本身具有其通常的含義（繼承），“initial”保留供將來使用。

　　例：顯示了使用“第1章”，“1.1”，“1.2”等對章節進行編號的方法。

　　html代碼：

　　<h2>大標題</h2>

　　<h3>小標題1</h3>

　　<h3>小標題2</h3>

　　css代碼：

　　body{

　　counter-reset:chapter;/*創建章節計數器范圍*/

　　}

　　h2:before{

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

　　counter-increment:chapter;/*在章節中添加1*/

　　}

　　h2{

　　counter-reset:section;/*將部分設置為0*/

　　}

　　h3:before{

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

　　counter-increment:section;

　　}

以上是“css如何實現自動編號”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！