我們都已經(jīng)對(duì)計(jì)數(shù)器很熟悉了,例如,有序列表中的列表項(xiàng)標(biāo)志就是計(jì)數(shù)器。在網(wǎng)頁(yè)建設(shè)中,沒(méi)有辦法影響這些計(jì)數(shù)器很大程度上是因?yàn)闆](méi)有這個(gè)必要:HTML為有序列表定義了自己的計(jì)數(shù)行為,這就足夠了。隨著XML的出現(xiàn),現(xiàn)在需要提供一種定義計(jì)釋器的方法,這很重要。不過(guò),CSS2沒(méi)有滿足于只是提供HTML中的簡(jiǎn)單計(jì)數(shù)。它增加了兩個(gè)屬性和兩個(gè)content值,從而可以定義幾乎所有計(jì)數(shù)格式,包括采用多種樣式的小節(jié)計(jì)數(shù)器,如“VII.2.C”。
使用計(jì)數(shù)器
不過(guò),要在網(wǎng)頁(yè)設(shè)計(jì)中具體顯示計(jì)數(shù)器,還需要結(jié)合使用content屬性和一個(gè)與計(jì)數(shù)器有關(guān)的值。要了解這是如何做到的,下面以一個(gè)基于XML的有序列表為例,如下:
<list type="ordered">
<item>First item</item>
<item>Xtem two</item>
<item>The third itera</item>
</list>
向采用此結(jié)構(gòu)的XML應(yīng)用以下規(guī)則,可以得到如圖12-22所示的結(jié)果:
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;}
注意,與平常一樣,生成內(nèi)容作為行內(nèi)內(nèi)容放在相關(guān)元素的開(kāi)始位置。因此,其效果類似于聲明了list-style-position: inside;的HTML列表。
還要注意,item元素是生成塊級(jí)框的普通元素,這說(shuō)明計(jì)數(shù)器并不僅限于display為 list-itexn的元素。實(shí)際上,任何元素都可以利用計(jì)數(shù)器。考慮以下規(guī)則:
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元素如何使用計(jì)數(shù)器chapter,該計(jì)數(shù)器默認(rèn)為0,但在元素文本前卻顯示了一個(gè)“1.”。計(jì)數(shù)器由同一個(gè)元素遞增和使用時(shí),遞增發(fā)生在計(jì)數(shù)器顯示之前。類似地,如果計(jì)數(shù)器在同一個(gè)元素中重置和顯示,重置也在計(jì)數(shù)器顯示之前發(fā)生??紤]以下規(guī)則:
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.”,因?yàn)橛?jì)數(shù)器section和subsec都重置,但沒(méi)有遞增。這意味著如果希望一個(gè)遞增計(jì)數(shù)器第一次顯示0,只需將該計(jì)數(shù)器重置為-1,如下:
body {counter-reset: chapter -1;}
h1:before {counter-increment: chapter; content: counter(chapter)".";}
對(duì)計(jì)數(shù)器還可以做一些有意思的事情??紤]以下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>
可以用以下規(guī)則改寫(xiě)B(tài)ASIC程序清單的傳統(tǒng)格式:
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è)計(jì)數(shù)器定義一個(gè)列表樣式,作為counter ()格式的一部分。為此可以在計(jì)數(shù)器的標(biāo)識(shí)符后面增加一個(gè)list-style-type關(guān)鍵字,用逗號(hào)分隔。
注意,沒(méi)有為計(jì)數(shù)器section指定樣式關(guān)鍵字,所以它默認(rèn)為decimal計(jì)數(shù)樣式。如果愿意,甚至可以將計(jì)數(shù)器設(shè)置為使用樣式disc、circle、square和none,
有意思的是,在網(wǎng)頁(yè)設(shè)計(jì)中,即使規(guī)則看上去會(huì)讓計(jì)數(shù)器遞增,但實(shí)際上display為none的元素并不會(huì)遞增計(jì)數(shù)器。相反,visibility為hidden的元素確實(shí)會(huì)遞增計(jì)數(shù)器:
.suppress {counter-increment: entr; display: none;}
/*'cntr' is NOT incremented */
.invisible {counter-increment: cntr; visibility: hidden;}
/*'cntr' IS incremented */