CSS創(chuàng)建一個計數(shù)器
作者：佚名 時間：2014-03-24 分享到：
在HTMl和XHTMl中，使用<ol>元素可以創(chuàng)建簡單的編號列表。但是更為復(fù)雜的編號列表，尤其是嵌套的編號列表，則不可能使用標記語言。但是，css提出了計數(shù)器(counter)的概念，它的值可以在瀏覽器顯示文檔時加以設(shè)定和改變。使用當(dāng)前屬性能夠識別的特殊函數(shù)插入計數(shù)器的值，并用其他css屬性改變計數(shù)器的外觀和格式。
所有的css計數(shù)器都有一個名稱。要創(chuàng)建一個計數(shù)器，僅在與其相關(guān)聯(lián)的counter-reset或counter-imcrement屬性中提到一個名稱即可。如果該命名計數(shù)器的實例在當(dāng)前文檔嵌套級別中還不存在，支持css的瀏覽器會自動創(chuàng)建一個。因此，可以根據(jù)需要設(shè)置或重設(shè)計數(shù)器的值。例如，假設(shè)我們要使用<h1>元素作為章標題，用<h2>元素作為節(jié)標題。章節(jié)都是編號形式，在新的每一章中都要重要重新設(shè)置節(jié)標題。用下列指令可以達到想要的效果：
h1:before{ counter-increment: chapter counter-reset :section}
h2:before{counter-increment: section}
當(dāng)支持css的瀏覽器遇到文檔中的第一個<h1>元素時，它會生成章節(jié)的計數(shù)器，并將它們的值重設(shè)為0.同時，對于其后的所有計數(shù)器，支持css的瀏覽器都會通過counter-increment屬性將章的計數(shù)器設(shè)為1，表示為Chapter 1,然后是2，等等。當(dāng)在章中遇到<h2>元素時，節(jié)的計數(shù)器會根據(jù)h2樣式規(guī)則得到增加，并按順序為每一節(jié)編號。這里還要注意，節(jié)的計數(shù)器是由h1規(guī)則進行重設(shè)的，因此節(jié)的計數(shù)器會在每一章中重啟（除非明確告訴瀏覽器要顯示計數(shù)器，否則不會顯示）
counter-reset和counter-increment屬性都接受計數(shù)器名稱列表，用它便可以在一個屬性中重設(shè)或增加計數(shù)器組。還可以在計數(shù)器名稱后提供一個數(shù)值，這樣一來，計數(shù)器使用counter-reset就可以初始化為指定的值，而counter-increment會將值添加到當(dāng)前的計數(shù)器中。也允許使用負數(shù)，因此如果需要的話，可以倒計時。
例如，發(fā)果我們希望文檔從Chapter7開始，而且希望節(jié)的編號以2為增量增加，可以重寫前面的示例，如下所示：
body{counter-reset: chapter6}
h1:before{counter-increment: chapter; counter-reset: section}
h2:before{counter-increment: section2}
請注意我們?nèi)绾问褂帽人璧牡谝恢敌?的值在文檔最早的可能元素中創(chuàng)建章計數(shù)器。當(dāng)瀏覽器遇到第一個<h1>元素時，會生成計數(shù)器，將其設(shè)為3，然后增加章計數(shù)器。
計數(shù)器名稱的范圍就是在其中定義它的嵌套層，不必是整個文檔的范圍。如果在子元素中使用同一個計數(shù)器名名稱，瀏覽器會在該級別創(chuàng)建一個新的計數(shù)器實例。在我們的示例中，所有的<h1>和<h2>元素都存在于同一嵌套層中，因此章節(jié)計數(shù)器的一個實例就對整個級別起作用。如果在該元素中嵌套了<div>標簽，反過來它又會包含<h1>和<h2>元素。在那個新的級別上會創(chuàng)建這兩個計數(shù)器的新實例。
這種嵌套行為對于嵌套的編號列表來說非常重要。如果將一個計數(shù)器與<li>元素關(guān)聯(lián)在一起，然后嵌套多個有序列表，每個列表級別中都會有自己的計數(shù)器實例，而且每個級別上都會有單獨的編號序列。
