css實(shí)現(xiàn)自動(dòng)編號(hào)的方法是什么

css實(shí)現(xiàn)自動(dòng)編號(hào)的方法是什么？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

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

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

效果圖：

注：

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

2、如果元素既重置又增加計(jì)數(shù)器，則首先重置計(jì)數(shù)器然后遞增。

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

例：

1、將'section'計(jì)數(shù)器重置為0：

h2 { counter-reset: section 2 section }

2、將“chapter”計(jì)數(shù)器增加3：

h2 { counter-increment: chapter chapter 2 }

3、在“counter-reset”屬性遵循層疊規(guī)則。因此，由于級(jí)聯(lián)，以下樣式表：

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

4、只會(huì)重置'imagenum'。要重置兩個(gè)計(jì)數(shù)器，必須同時(shí)指定它們：

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

二、計(jì)數(shù)器的樣式

默認(rèn)情況下，計(jì)數(shù)器使用十進(jìn)制數(shù)字格式化，但“l(fā)ist-style-type”屬性的所有可用樣式也可用于計(jì)數(shù)器。符號(hào)是：

counter(name)

默認(rèn)樣式，或設(shè)置其他樣式：

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

計(jì)數(shù)器允許使用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)
}

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)css實(shí)現(xiàn)自動(dòng)編號(hào)的方法是什么大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。