至此，我們已經了解了如何在網站建設時把多個計數器串在一起創建一種多級計數。創作人員通常還需要對嵌套有序列表這么處理，不過為了達到很深的嵌套層次，需要創建足夠多的計數器，這種做法很快會變得相當笨拙。僅僅是建立5層嵌套列表就需要一大堆的規則，如下：

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層嵌套需要寫多少規則！（這并不是說你應當建立50層的嵌套有序列表，即不表示這是合理的，而只是暫且舉個例子。）

好在CSS2.x描述了計數器的作用域（scope）概念。簡單地說，每層嵌套都會為給定計數器創建一個新的作用域。正是因為有作用域，以下規則才能以常規HTML方式實現嵌套表計數：

ol {counter-reset: ordered;}

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

這些規則會使有序列表（甚至嵌套在其他列表中的有序列表）從1開始計數，并且逐項增1，這正是HTML—直以來的做法。

之所以能做到這一點，是因為毎層嵌套都為計數器ordered創建了一個新實例。所以，在網頁設計時，對于第一個有序列表，會創建ordered的一個實例。然后，對于嵌套在第一個列表中的各個列表，又會創建另一個新實例，因此對于每個列表計數總是從頭開始。

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

基本說來，關鍵字counters (ordered，會顯示各作用域的ordered計數器，并追加一個點號，然后把對應一個給定元素的所有作用域計數器串起來。因此，一個3層嵌套列表中的列表項就會有這樣的前綴：最外層列表作用域的ordered值、中間層列表作用域的ordered值（中間層列表是最外層列表和當前列表之間的列表），以及當前列表作用域的ordered值，各個ordered值后面都有一個點號。content值的余下部分（"-"）會在所有這些計數器后面增加一個空格、一個連字號以及另一個空格。

與counter()類似，可以為嵌套計數器定義一個列表樣式，不過所有計數器都應用同樣的樣式。

小結

盡管列表樣式沒有我們希望得那么復雜，而且瀏覽器對生成內容的支持還有些欠缺（至少在寫作本書的時候是這樣），不過能夠對列表應用樣式還是很有用的。一個常見的用途是取一個鏈接列表，去除其標志和縮進來創建一個導航邊欄。一方面要保證簡單的標記，另一方面要得到靈活的布局，這很難做到。CSS3在列表樣式方面預期有一些改進，基于此，我們期待列表將來變得越來越有用。

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

當前名稱：網頁設計中的計數器和作用域
分享URL：http://m.2m8n56k.cn/news45/168795.html

成都網站建設公司_創新互聯，為您提供云服務器、關鍵詞優化、商城網站、響應式網站、微信公眾號、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯