在我們設計網(wǎng)頁(yè)時(shí)，如果特殊性相等的兩個(gè)規則同時(shí)應用到同一個(gè)元素會(huì )怎么樣呢？瀏覽器如何解決這個(gè)沖突？例如，假設有以下規則：

h1 {color:red;}

h1 {color:blue;}

哪一個(gè)會(huì )占上風(fēng)？這兩個(gè)規則的特殊性都是0,0, 0,1,所以它們的權重相等，都應當應用到元素。但這是不可能的，因為一個(gè)元素不可能既是紅色又是藍色。但是到底應用哪一個(gè)規則呢？

“層疊樣式表”這個(gè)名字可能會(huì )提供一點(diǎn)提示。CSS所基于的方法就是讓樣式層疊在一起，這是通過(guò)結合繼承和特殊性做到的。CSS2.1的層疊規則相當簡(jiǎn)單：

找出所有相關(guān)的規則，這些規則都包含與一個(gè)給定元素匹配的選擇器。

按顯式權重對應用到該元素的所有聲明排序。標志!important的規則的權重要高于沒(méi)有!important標志的規則。按來(lái)源對應用到給定元素的所有聲明排序。共有3種來(lái)源：網(wǎng)頁(yè)設計師、讀者和用戶(hù)代理。正常情況下，創(chuàng )作人員的樣式要勝過(guò)讀者的樣式。有!important標志的讀者樣式要強干所有其他樣式，這包括有!important標志的網(wǎng)頁(yè)設計師樣式。網(wǎng)頁(yè)設計師樣式和讀者樣式都比用戶(hù)代理的默認樣式要強。

按特殊性對應用到給定元素的所有聲明排序。有較高特殊性的元素權重要大于有較低特殊性的元素。

按出現順序對應用到給定元素的所有聲明排序。一個(gè)聲明在樣式表或文檔中越后出現，它的權重就越大。如果樣式表中有導入的樣式表，一般認為出現在導入樣式表中的聲明在前，主樣式表中的所有聲明在后。

為了淸楚地說(shuō)明如何做到這些，下面來(lái)看三個(gè)例子，由此介紹上述4條層疊規則中的后三條規則。

按權重和來(lái)源排序

根據第二條規則，如果兩個(gè)樣式規則應用到同一個(gè)元素，而且其中一個(gè)規則有!important標志，這個(gè)重要規則將勝出：

p {color:gray !important;}

<p style="color:black;">Well，<em>hello</em> there!</p>

盡管段落的style屬性中指定了一個(gè)顏色，不過(guò)有!important標志的規則會(huì )勝出，所以段落為灰色。em元素也會(huì )繼承這個(gè)灰色。

另外，還要考慮規則的來(lái)源。如果一個(gè)元素與網(wǎng)頁(yè)設計師樣式表中的正常權重樣式匹配,另外還與讀者樣式表中的正常權重樣式匹配，則會(huì )使用網(wǎng)頁(yè)設計師的樣式。例如，假設以下樣式分別來(lái)自注釋中指定的來(lái)源：

p em {color: black;}/* author's style sheet */

p em {color: yellow;}/* reader's style sheet */

在這種情況下，段落中強調的文本為黑色，而不是黃色，因為有正常權重的網(wǎng)頁(yè)設計師樣式要優(yōu)先于正常權重的讀者樣式。不過(guò)，如果兩個(gè)規則都標志有!important，情況就不同了：

p em {color: black !important;}/* author's style sheet */

p em {color: yellow !important;}/* reader's style sheet */

現在段落中的強調文本將是黃色而不是黑色。

一般地，用戶(hù)代理的默認樣式（通常受用戶(hù)首選項的影響）也要考慮在內。默認樣式聲明在所有聲明當中影響是最小的。因此，如果網(wǎng)頁(yè)設計師定義的一個(gè)規則應用到錨（例如，聲明這些錨顏色為white）,該規則會(huì )覆蓋用戶(hù)代理的默認樣式。

總結一下，在聲明權重方面要考慮5級。權重由大到小的順序依次為：

讀者的重要聲明

創(chuàng )作人員的重要聲明

創(chuàng )作人員的正常聲明

讀者的正常聲明

用戶(hù)代理聲明

網(wǎng)頁(yè)設計師通常只需要考慮前4個(gè)權重級別，因為任何聲明都會(huì )勝過(guò)用戶(hù)代理樣式。

按特殊性排序

根據第3條規則，如果向一個(gè)元素應用多個(gè)彼此沖突的聲明，而且它們的權重相同，則要按特殊性排序，最特殊的聲明最優(yōu)先。例如：

p#bright {color: silver;}

p {color: black;}

<p id="bright">Well, hello there!</p>

給定以上所示的規則，段落的文本將是銀色，為什么呢？因為p#bright 的特殊性（0,1, 0,1）大于p的特殊性（0,0, 0,1）,盡管后一條規則在樣式表中較后出現。

按順序排序

最后，根據第4條規則，如果兩個(gè)規則的權重、來(lái)源和特殊性完全相同，那么在樣式表中后出現的一個(gè)會(huì )勝出。因此，再來(lái)看前面的例子，在文檔樣式表中可以看到以下兩個(gè)規則：

h1 {color: red;}

h1 {color: blue;}

因為指定blue的規則在樣式表中較后出現，所以文檔中所有h1元素的color值將是blue,而不是red。倘若文檔中包含的規則比導入的規則權重高，那么文檔中包含的規則將勝出。即使這個(gè)規則是文檔樣式表的一部分而不是元素style屬性的一部分，也是如此?？紤]以下規則：

p em {color: purple;}/* from imported style sheet */

p em {color: gray;}/* rule contained within the document */

在這種情況下，以上第二個(gè)規則會(huì )勝過(guò)導入的規則，因為第二個(gè)規則是文檔樣式表的一部分。

根據層疊的第4條規則，認為元素style屬性中指定的樣式位于文檔樣式表的最后，即放在所有其他規則的后面。不過(guò)，這一點(diǎn)沒(méi)有實(shí)際意義，因為在CSS2.1中內聯(lián)樣式聲明的特殊性要高于所有樣式表選擇器。

注意：要記住，在CSS2中，內聯(lián)樣式聲明與ID選擇器的特殊性相等。在一個(gè)CSS2(而非CSS2.1)用戶(hù)代理中，認為style屬性聲明出現在文檔樣式表的最后，并且與樣式表中所有其他聲明一樣，按權重、來(lái)源、特殊性和順序排序。

正是由于這種按順序排序，所以才有了通常推薦的鏈接樣式順序。一般建議按link-visited-hover-active (LVHA)的順序聲明鏈接樣式如下：

:link {color: blue;}

:visited {color: purple;}

:hover {color: red;}

:active {color: orange;}

根據這一章的介紹，現在你知道了所有這些選擇器的特殊性都是一樣的：0,0,1,0。因為它們都有相同的權重、來(lái)源和特殊性，因此與元素匹配的最后一個(gè)選擇器才會(huì )勝出。正在“點(diǎn)擊”的未訪(fǎng)問(wèn)鏈接可以與其中3個(gè)規則匹配--:link.:hover和:active--所以在這三個(gè)規則當中最后聲明的一個(gè)將勝出。如果按照LVHA順序，:active 會(huì )勝出，這可能正是創(chuàng )作人員所期望的。

假設你想忽略這種常用的順序，而是按字母順序排列鏈接樣式。這就會(huì )得到：

:active {color: orange;}

:hover {color: red;}

:link {color: blue;}

:visited {color: purple;}

按照這種順序，任何鏈接都不會(huì )顯示:hover或:active樣式，因為:link和:visited 規則后出現。所有鏈接都必須要么是已訪(fǎng)問(wèn)，要么是未訪(fǎng)問(wèn)的，所以:link和:visited 樣式總是會(huì )覆蓋:hover規則。

下面考慮網(wǎng)頁(yè)設計師可能想使用的LVHA順序的一個(gè)變種。采用這種順序，只有未訪(fǎng)問(wèn)的鏈接會(huì )有懸停樣式，已訪(fǎng)問(wèn)的鏈接沒(méi)有這種樣式。已訪(fǎng)問(wèn)和未訪(fǎng)問(wèn)的鏈接都可以有激活樣式（active）:

:link {color: blue;}

:hover {color: red;}

:visited {color: purple;}

:active {color: orange;}

當然，有時(shí)如果所有規則試圖設置同一個(gè)屬性，就會(huì )出現這種沖突。如果各規則為不同的屬性設置樣式，那么順序無(wú)關(guān)緊要。在下面的情況中，鏈接樣式可以按任何順序指定，而且不論采用何種順序都能正常起作用：

:link {font-weight: bold;}

:visited {font-style: italic;}

:hover {color: red;}

:active {background: yellow;}

你可能還發(fā)現，:link和:visited樣式的順序并不重要?？梢园碙VHA或VLHA的順序指定樣式，這沒(méi)有任何不良后果。不過(guò)，LVHA更好一些，因為這是CSS2規范中推薦的順序，另一個(gè)原因是LVHA拼作“LoVe-HA!”，這個(gè)詞更易于記憶，流通很廣。

有關(guān)系。鼠標停留的未訪(fǎng)問(wèn)鏈接不會(huì )與針對懸停狀態(tài)已訪(fǎng)問(wèn)鏈接的規則相匹配，反之亦然。如果要增加激活狀態(tài)樣式，就要重新考慮順序了，請看下面的例子：

:link {color: blue;}

:visited {color: purple;}

:link:hover {color: red;}

:visited:hover {color: gray;}

:link:active {color: orange;}

:visited:active {color: silver;}

如果把激活樣式移到懸停樣式前面，它們會(huì )被忽略。同樣地，這是由于特殊性沖突所致?？梢韵蜴溨性黾痈嗟膫晤?lèi)來(lái)避免這種沖突，如下：

:link:hover:active {color: orange;}

:visited:hover:active {color: silver;}

通過(guò)將偽類(lèi)鏈接在一起，能緩解特殊性和順序帶來(lái)的問(wèn)題，如果Internet Explorer以前就一直支持這種串鏈的偽類(lèi)，它的應用可能會(huì )更廣（有關(guān)的更多內容見(jiàn)第2章）。

非CSS表現提示

網(wǎng)頁(yè)文檔有可能包含非CSS的表現提示，例如font元素。非CSS提示被處理為特殊性為0,并出現在網(wǎng)頁(yè)設計師樣式表的最前面。只要有網(wǎng)頁(yè)設計師或讀者樣式，這種表現提示就會(huì )被覆蓋，但是用戶(hù)代理的樣式不能將其覆蓋。

小結

層疊樣式表中最基本的一個(gè)方面可能就是層疊了——沖突的聲明要通過(guò)這個(gè)層疊過(guò)程排序，并由此確定最終的文檔表示。這個(gè)過(guò)程的核心是選擇器及其相關(guān)聲明的特殊性，以及繼承機制。

在下一章中，我們將介紹多種用于為屬性值提供含義的單位，討論完下一章后，你就能清楚地了解全部基礎知識，并做好進(jìn)一步學(xué)習指定文檔樣式的屬性的準備。