至此，我們已經(jīng)了解了如何在網(wǎng)站建設(shè)時(shí)把多個(gè)計(jì)數(shù)器串在一起創(chuàng)建一種多級(jí)計(jì)數(shù)。創(chuàng)作人員通常還需要對(duì)嵌套有序列表這么處理，不過(guò)為了達(dá)到很深的嵌套層次，需要?jiǎng)?chuàng)建足夠多的計(jì)數(shù)器，這種做法很快會(huì)變得相當(dāng)笨拙。僅僅是建立5層嵌套列表就需要一大堆的規(guī)則，如下：

ol ol ol ol ol li:before {counter-increment: ordl ord2 ord3 ord4 ord5;content: counter(ordl)""" counter(ord2)"." counter(ord3) counter(ord4) counter(ord5)".";}

想想看，要建立50層嵌套需要寫(xiě)多少規(guī)則！（這并不是說(shuō)你應(yīng)當(dāng)建立50層的嵌套有序列表，即不表示這是合理的，而只是暫且舉個(gè)例子。）

好在CSS2.x描述了計(jì)數(shù)器的作用域（scope）概念。簡(jiǎn)單地說(shuō)，每層嵌套都會(huì)為給定計(jì)數(shù)器創(chuàng)建一個(gè)新的作用域。正是因?yàn)橛凶饔糜颍韵乱?guī)則才能以常規(guī)HTML方式實(shí)現(xiàn)嵌套表計(jì)數(shù)：

ol {counter-reset: ordered;}

ol li:before {counter-increment: ordered; content: counter(ordered)".";}

這些規(guī)則會(huì)使有序列表（甚至嵌套在其他列表中的有序列表）從1開(kāi)始計(jì)數(shù)，并且逐項(xiàng)增1，這正是HTML—直以來(lái)的做法。

之所以能做到這一點(diǎn)，是因?yàn)闅皩忧短锥紴橛?jì)數(shù)器ordered創(chuàng)建了一個(gè)新實(shí)例。所以，在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，對(duì)于第一個(gè)有序列表，會(huì)創(chuàng)建ordered的一個(gè)實(shí)例。然后，對(duì)于嵌套在第一個(gè)列表中的各個(gè)列表，又會(huì)創(chuàng)建另一個(gè)新實(shí)例，因此對(duì)于每個(gè)列表計(jì)數(shù)總是從頭開(kāi)始。

不過(guò)，如果你希望有序列表這樣計(jì)數(shù)，使毎層嵌套都創(chuàng)建一個(gè)新計(jì)數(shù)器追加到老計(jì)數(shù)器上，如：1、1.1、1.2, 1.2.1. 1.2.2、1.3. 2、2.1 等。利用counter()是辦不到的，不過(guò)可以用counters ()實(shí)現(xiàn)。這里的區(qū)別就在于一個(gè)“s”（counters ()而不是counter()）。

基本說(shuō)來(lái)，關(guān)鍵字counters (ordered，會(huì)顯示各作用域的ordered計(jì)數(shù)器，并追加一個(gè)點(diǎn)號(hào)，然后把對(duì)應(yīng)一個(gè)給定元素的所有作用域計(jì)數(shù)器串起來(lái)。因此，一個(gè)3層嵌套列表中的列表項(xiàng)就會(huì)有這樣的前綴：最外層列表作用域的ordered值、中間層列表作用域的ordered值（中間層列表是最外層列表和當(dāng)前列表之間的列表），以及當(dāng)前列表作用域的ordered值，各個(gè)ordered值后面都有一個(gè)點(diǎn)號(hào)。content值的余下部分（"-"）會(huì)在所有這些計(jì)數(shù)器后面增加一個(gè)空格、一個(gè)連字號(hào)以及另一個(gè)空格。

與counter()類似，可以為嵌套計(jì)數(shù)器定義一個(gè)列表樣式，不過(guò)所有計(jì)數(shù)器都應(yīng)用同樣的樣式。

小結(jié)

盡管列表樣式?jīng)]有我們希望得那么復(fù)雜，而且瀏覽器對(duì)生成內(nèi)容的支持還有些欠缺（至少在寫(xiě)作本書(shū)的時(shí)候是這樣），不過(guò)能夠?qū)α斜響?yīng)用樣式還是很有用的。一個(gè)常見(jiàn)的用途是取一個(gè)鏈接列表，去除其標(biāo)志和縮進(jìn)來(lái)創(chuàng)建一個(gè)導(dǎo)航邊欄。一方面要保證簡(jiǎn)單的標(biāo)記，另一方面要得到靈活的布局，這很難做到。CSS3在列表樣式方面預(yù)期有一些改進(jìn)，基于此，我們期待列表將來(lái)變得越來(lái)越有用。

至于目前，如果一個(gè)標(biāo)記語(yǔ)言本身沒(méi)有固有的列表元素，生成內(nèi)容會(huì)有很大幫助，例如，可以插入圖標(biāo)之類的內(nèi)容指向某種類型的鏈接（PDF文件、Word文檔，甚至另一個(gè)網(wǎng)站的鏈接）。利用生成內(nèi)容，還能很容易地打印鏈接URL，由于生成內(nèi)容能插入引號(hào)并完成格式化，這對(duì)于網(wǎng)頁(yè)設(shè)計(jì)中的排版非常有利，可以得到很好的效果。完全可以這么說(shuō)：生成內(nèi)容的用途只受你想象力的限制，只要想得到，生成內(nèi)容就能做得到。更好的一點(diǎn)是，利用計(jì)數(shù)器現(xiàn)在還可以向任何元素（而不只是列表）關(guān)聯(lián)序數(shù)信惠，如標(biāo)題或代碼塊。如果你還希望利用設(shè)計(jì)支持用戶界面方面的一些新特性，棋仿用戶搡作系統(tǒng)的外觀，那么請(qǐng)繼續(xù)讀下去。

當(dāng)前名稱：網(wǎng)頁(yè)設(shè)計(jì)中的計(jì)數(shù)器和作用域
分享URL：http://m.newbst.com/news45/168795.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、關(guān)鍵詞優(yōu)化、商城網(wǎng)站、響應(yīng)式網(wǎng)站、微信公眾號(hào)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)