css實現自動編號的方法是什么

css實現自動編號的方法是什么？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

一、自動編號

在CSS 2.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;
}

效果圖：

注：

1、如果元素遞增（increment）/重置（resets）計數器并且還使用計數器（在其：before或：after偽元素 的'content'屬性中），則需在遞增/重置后使用計數器。

2、如果元素既重置又增加計數器，則首先重置計數器然后遞增。

3、如果在'counter-reset'和'counter-increment' 屬性的值中多次指定相同的計數器，則按指定 的順序處理計數器的每個復位/增量。

例：

1、將'section'計數器重置為0：

h2 { counter-reset: section 2 section }

2、將“chapter”計數器增加3：

h2 { counter-increment: chapter chapter 2 }

3、在“counter-reset”屬性遵循層疊規則。因此，由于級聯，以下樣式表：

h2 {counter-reset：section -1}
h2 {counter-reset：imagenum 99}

4、只會重置'imagenum'。要重置兩個計數器，必須同時指定它們：

h2 {counter-reset：section -1 imagenum 99}

二、計數器的樣式

默認情況下，計數器使用十進制數字格式化，但“list-style-type”屬性的所有可用樣式也可用于計數器。符號是：

counter(name)

默認樣式，或設置其他樣式：

counter（name，< 'list-style-type' >）

計數器允許使用list-style-type屬性的所有樣式，包括'disc'，'circle'，'square'和'none'。

例：

h2:before {
	content: counter(chno, upper-latin) ". "
}

h3:before {
	content: counter(section, upper-roman) " - "
}

blockquote::after {
	content: " [" counter(bq, lower-greek) "]"
}

div.note:before {
	content: counter(notecntr, disc) " "
}

p:before {
	content: counter(p, none)
}

感謝各位的閱讀！看完上述內容，你們對css實現自動編號的方法是什么大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。