計數器

我們都已經(jīng)對計數器很熟悉了，例如，有序列表中的列表項標志就是計數器。在網(wǎng)頁(yè)建設中，沒(méi)有辦法影響這些計數器很大程度上是因為沒(méi)有這個(gè)必要：HTML為有序列表定義了自己的計數行為，這就足夠了。隨著(zhù)XML的出現，現在需要提供一種定義計釋器的方法，這很重要。不過(guò)，CSS2沒(méi)有滿(mǎn)足于只是提供HTML中的簡(jiǎn)單計數。它增加了兩個(gè)屬性和兩個(gè)content值，從而可以定義幾乎所有計數格式，包括采用多種樣式的小節計數器，如“VII.2.C”。

使用計數器

不過(guò)，要在網(wǎng)頁(yè)設計中具體顯示計數器，還需要結合使用content屬性和一個(gè)與計數器有關(guān)的值。要了解這是如何做到的，下面以一個(gè)基于XML的有序列表為例，如下：

<list type="ordered">

<item>First item</item>

<item>Xtem two</item>

<item>The third itera</item>

</list>

向采用此結構的XML應用以下規則，可以得到如圖12-22所示的結果：

list[type="ordered"]{counter-reset: ordered;}/* defaults to 0 */

list[type="ordered"] item {display: block;}

list[type="ordeired"] item:before {counter-increment: ordered; content: counter(ordered)";margin: 0.25em 0;}

注意，與平常一樣，生成內容作為行內內容放在相關(guān)元素的開(kāi)始位置。因此，其效果類(lèi)似于聲明了list-style-position: inside;的HTML列表。

還要注意，item元素是生成塊級框的普通元素，這說(shuō)明計數器并不僅限于display為 list-itexn的元素。實(shí)際上，任何元素都可以利用計數器?？紤]以下規則：

h1:before (counter-reset: section subsec;

counter-increment: chapter;

content: counter(chapter)".";}

h2:before {counter-reset: subsec;

counter-increment: section;

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

h3:before {counter-increment: subsec;

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

注意h1元素如何使用計數器chapter，該計數器默認為0，但在元素文本前卻顯示了一個(gè)“1.”。計數器由同一個(gè)元素遞增和使用時(shí)，遞增發(fā)生在計數器顯示之前。類(lèi)似地，如果計數器在同一個(gè)元素中重置和顯示，重置也在計數器顯示之前發(fā)生?？紤]以下規則：

h1:before, h2:before, h3：before {

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

h1 {counter-reset: section subsec;

counter-increment: chapter;}

文檔中第一個(gè)h1元素前面有文本"1.0.0.”，因為計數器section和subsec都重置，但沒(méi)有遞增。這意味著(zhù)如果希望一個(gè)遞增計數器第一次顯示0，只需將該計數器重置為-1，如下：

body {counter-reset: chapter -1;}

h1:before {counter-increment: chapter; content: counter(chapter)".";}

對計數器還可以做一些有意思的事情?？紤]以下XML:

<code type="BASIC">

<line>PRINT "Hello world!"</line>

<line>REM This is what Che kids are calling a "comment"</line>

<line>G0T0 10</line>

</code>

可以用以下規則改寫(xiě)BASIC程序清單的傳統格式：

code[type="BASIC"]{counter-reset: linenum;

font-family: monospace;}

code[type="BASIC"] line {display: block;}

code[type:"BASIC"] line:before {counter-increment: Xinenum; content: counter(linenum 10)"：";}

還可以為每個(gè)計數器定義一個(gè)列表樣式，作為counter ()格式的一部分。為此可以在計數器的標識符后面增加一個(gè)list-style-type關(guān)鍵字，用逗號分隔。

注意，沒(méi)有為計數器section指定樣式關(guān)鍵字，所以它默認為decimal計數樣式。如果愿意，甚至可以將計數器設置為使用樣式disc、circle、square和none,

有意思的是，在網(wǎng)頁(yè)設計中，即使規則看上去會(huì )讓計數器遞增，但實(shí)際上display為none的元素并不會(huì )遞增計數器。相反，visibility為hidden的元素確實(shí)會(huì )遞增計數器：

.suppress {counter-increment: entr; display: none;}

/*'cntr' is NOT incremented */

.invisible {counter-increment: cntr; visibility: hidden;}

/*'cntr' IS incremented */