在我們設(shè)計(jì)網(wǎng)頁時(shí),如果特殊性相等的兩個(gè)規(guī)則同時(shí)應(yīng)用到同一個(gè)元素會(huì)怎么樣呢?瀏覽器如何解決這個(gè)沖突?例如,假設(shè)有以下規(guī)則:
h1 {color:red;}
h1 {color:blue;}
哪一個(gè)會(huì)占上風(fēng)?這兩個(gè)規(guī)則的特殊性都是0,0, 0,1,所以它們的權(quán)重相等,都應(yīng)當(dāng)應(yīng)用到元素。但這是不可能的,因?yàn)橐粋€(gè)元素不可能既是紅色又是藍(lán)色。但是到底應(yīng)用哪一個(gè)規(guī)則呢?
“層疊樣式表”這個(gè)名字可能會(huì)提供一點(diǎn)提示。CSS所基于的方法就是讓樣式層疊在一起,這是通過結(jié)合繼承和特殊性做到的。CSS2.1的層疊規(guī)則相當(dāng)簡(jiǎn)單:
找出所有相關(guān)的規(guī)則,這些規(guī)則都包含與一個(gè)給定元素匹配的選擇器。
按顯式權(quán)重對(duì)應(yīng)用到該元素的所有聲明排序。標(biāo)志!important的規(guī)則的權(quán)重要高于沒有!important標(biāo)志的規(guī)則。按來源對(duì)應(yīng)用到給定元素的所有聲明排序。共有3種來源:網(wǎng)頁設(shè)計(jì)師、讀者和用戶代理。正常情況下,創(chuàng)作人員的樣式要?jiǎng)龠^讀者的樣式。有!important標(biāo)志的讀者樣式要強(qiáng)干所有其他樣式,這包括有!important標(biāo)志的網(wǎng)頁設(shè)計(jì)師樣式。網(wǎng)頁設(shè)計(jì)師樣式和讀者樣式都比用戶代理的默認(rèn)樣式要強(qiáng)。
按特殊性對(duì)應(yīng)用到給定元素的所有聲明排序。有較高特殊性的元素權(quán)重要大于有較低特殊性的元素。
按出現(xiàn)順序?qū)?yīng)用到給定元素的所有聲明排序。一個(gè)聲明在樣式表或文檔中越后出現(xiàn),它的權(quán)重就越大。如果樣式表中有導(dǎo)入的樣式表,一般認(rèn)為出現(xiàn)在導(dǎo)入樣式表中的聲明在前,主樣式表中的所有聲明在后。
為了淸楚地說明如何做到這些,下面來看三個(gè)例子,由此介紹上述4條層疊規(guī)則中的后三條規(guī)則。
根據(jù)第二條規(guī)則,如果兩個(gè)樣式規(guī)則應(yīng)用到同一個(gè)元素,而且其中一個(gè)規(guī)則有!important標(biāo)志,這個(gè)重要規(guī)則將勝出:
p {color:gray !important;}
<p style="color:black;">Well,<em>hello</em> there!</p>
盡管段落的style屬性中指定了一個(gè)顏色,不過有!important標(biāo)志的規(guī)則會(huì)勝出,所以段落為灰色。em元素也會(huì)繼承這個(gè)灰色。
另外,還要考慮規(guī)則的來源。如果一個(gè)元素與網(wǎng)頁設(shè)計(jì)師樣式表中的正常權(quán)重樣式匹配,另外還與讀者樣式表中的正常權(quán)重樣式匹配,則會(huì)使用網(wǎng)頁設(shè)計(jì)師的樣式。例如,假設(shè)以下樣式分別來自注釋中指定的來源:
p em {color: black;}/* author's style sheet */
p em {color: yellow;}/* reader's style sheet */
在這種情況下,段落中強(qiáng)調(diào)的文本為黑色,而不是黃色,因?yàn)橛姓?quán)重的網(wǎng)頁設(shè)計(jì)師樣式要優(yōu)先于正常權(quán)重的讀者樣式。不過,如果兩個(gè)規(guī)則都標(biāo)志有!important,情況就不同了:
p em {color: black !important;}/* author's style sheet */
p em {color: yellow !important;}/* reader's style sheet */
現(xiàn)在段落中的強(qiáng)調(diào)文本將是黃色而不是黑色。
一般地,用戶代理的默認(rèn)樣式(通常受用戶首選項(xiàng)的影響)也要考慮在內(nèi)。默認(rèn)樣式聲明在所有聲明當(dāng)中影響是最小的。因此,如果網(wǎng)頁設(shè)計(jì)師定義的一個(gè)規(guī)則應(yīng)用到錨(例如,聲明這些錨顏色為white),該規(guī)則會(huì)覆蓋用戶代理的默認(rèn)樣式。
總結(jié)一下,在聲明權(quán)重方面要考慮5級(jí)。權(quán)重由大到小的順序依次為:
讀者的重要聲明
創(chuàng)作人員的重要聲明
創(chuàng)作人員的正常聲明
讀者的正常聲明
用戶代理聲明
網(wǎng)頁設(shè)計(jì)師通常只需要考慮前4個(gè)權(quán)重級(jí)別,因?yàn)槿魏温暶鞫紩?huì)勝過用戶代理樣式。
根據(jù)第3條規(guī)則,如果向一個(gè)元素應(yīng)用多個(gè)彼此沖突的聲明,而且它們的權(quán)重相同,則要按特殊性排序,最特殊的聲明最優(yōu)先。例如:
p#bright {color: silver;}
p {color: black;}
<p id="bright">Well, hello there!</p>
給定以上所示的規(guī)則,段落的文本將是銀色,為什么呢?因?yàn)閜#bright 的特殊性(0,1, 0,1)大于p的特殊性(0,0, 0,1),盡管后一條規(guī)則在樣式表中較后出現(xiàn)。
最后,根據(jù)第4條規(guī)則,如果兩個(gè)規(guī)則的權(quán)重、來源和特殊性完全相同,那么在樣式表中后出現(xiàn)的一個(gè)會(huì)勝出。因此,再來看前面的例子,在文檔樣式表中可以看到以下兩個(gè)規(guī)則:
h1 {color: red;}
h1 {color: blue;}
因?yàn)橹付╞lue的規(guī)則在樣式表中較后出現(xiàn),所以文檔中所有h1元素的color值將是blue,而不是red。倘若文檔中包含的規(guī)則比導(dǎo)入的規(guī)則權(quán)重高,那么文檔中包含的規(guī)則將勝出。即使這個(gè)規(guī)則是文檔樣式表的一部分而不是元素style屬性的一部分,也是如此。考慮以下規(guī)則:
p em {color: purple;}/* from imported style sheet */
p em {color: gray;}/* rule contained within the document */
在這種情況下,以上第二個(gè)規(guī)則會(huì)勝過導(dǎo)入的規(guī)則,因?yàn)榈诙€(gè)規(guī)則是文檔樣式表的一部分。
根據(jù)層疊的第4條規(guī)則,認(rèn)為元素style屬性中指定的樣式位于文檔樣式表的最后,即放在所有其他規(guī)則的后面。不過,這一點(diǎn)沒有實(shí)際意義,因?yàn)樵贑SS2.1中內(nèi)聯(lián)樣式聲明的特殊性要高于所有樣式表選擇器。
注意:要記住,在CSS2中,內(nèi)聯(lián)樣式聲明與ID選擇器的特殊性相等。在一個(gè)CSS2(而非CSS2.1)用戶代理中,認(rèn)為style屬性聲明出現(xiàn)在文檔樣式表的最后,并且與樣式表中所有其他聲明一樣,按權(quán)重、來源、特殊性和順序排序。
正是由于這種按順序排序,所以才有了通常推薦的鏈接樣式順序。一般建議按link-visited-hover-active (LVHA)的順序聲明鏈接樣式如下:
:link {color: blue;}
:visited {color: purple;}
:hover {color: red;}
:active {color: orange;}
根據(jù)這一章的介紹,現(xiàn)在你知道了所有這些選擇器的特殊性都是一樣的:0,0,1,0。因?yàn)樗鼈兌加邢嗤臋?quán)重、來源和特殊性,因此與元素匹配的最后一個(gè)選擇器才會(huì)勝出。正在“點(diǎn)擊”的未訪問鏈接可以與其中3個(gè)規(guī)則匹配--:link.:hover和:active--所以在這三個(gè)規(guī)則當(dāng)中最后聲明的一個(gè)將勝出。如果按照LVHA順序,:active 會(huì)勝出,這可能正是創(chuàng)作人員所期望的。
假設(shè)你想忽略這種常用的順序,而是按字母順序排列鏈接樣式。這就會(huì)得到:
:active {color: orange;}
:hover {color: red;}
:link {color: blue;}
:visited {color: purple;}
按照這種順序,任何鏈接都不會(huì)顯示:hover或:active樣式,因?yàn)?link和:visited 規(guī)則后出現(xiàn)。所有鏈接都必須要么是已訪問,要么是未訪問的,所以:link和:visited 樣式總是會(huì)覆蓋:hover規(guī)則。
下面考慮網(wǎng)頁設(shè)計(jì)師可能想使用的LVHA順序的一個(gè)變種。采用這種順序,只有未訪問的鏈接會(huì)有懸停樣式,已訪問的鏈接沒有這種樣式。已訪問和未訪問的鏈接都可以有激活樣式(active):
:link {color: blue;}
:hover {color: red;}
:visited {color: purple;}
:active {color: orange;}
當(dāng)然,有時(shí)如果所有規(guī)則試圖設(shè)置同一個(gè)屬性,就會(huì)出現(xiàn)這種沖突。如果各規(guī)則為不同的屬性設(shè)置樣式,那么順序無關(guān)緊要。在下面的情況中,鏈接樣式可以按任何順序指定,而且不論采用何種順序都能正常起作用:
:link {font-weight: bold;}
:visited {font-style: italic;}
:hover {color: red;}
:active {background: yellow;}
你可能還發(fā)現(xiàn),:link和:visited樣式的順序并不重要。可以按LVHA或VLHA的順序指定樣式,這沒有任何不良后果。不過,LVHA更好一些,因?yàn)檫@是CSS2規(guī)范中推薦的順序,另一個(gè)原因是LVHA拼作“LoVe-HA!”,這個(gè)詞更易于記憶,流通很廣。
有關(guān)系。鼠標(biāo)停留的未訪問鏈接不會(huì)與針對(duì)懸停狀態(tài)已訪問鏈接的規(guī)則相匹配,反之亦然。如果要增加激活狀態(tài)樣式,就要重新考慮順序了,請(qǐng)看下面的例子:
:link {color: blue;}
:visited {color: purple;}
:link:hover {color: red;}
:visited:hover {color: gray;}
:link:active {color: orange;}
:visited:active {color: silver;}
如果把激活樣式移到懸停樣式前面,它們會(huì)被忽略。同樣地,這是由于特殊性沖突所致??梢韵蜴溨性黾痈嗟膫晤悂肀苊膺@種沖突,如下:
:link:hover:active {color: orange;}
:visited:hover:active {color: silver;}
通過將偽類鏈接在一起,能緩解特殊性和順序帶來的問題,如果Internet Explorer以前就一直支持這種串鏈的偽類,它的應(yīng)用可能會(huì)更廣(有關(guān)的更多內(nèi)容見第2章)。
網(wǎng)頁文檔有可能包含非CSS的表現(xiàn)提示,例如font元素。非CSS提示被處理為特殊性為0,并出現(xiàn)在網(wǎng)頁設(shè)計(jì)師樣式表的最前面。只要有網(wǎng)頁設(shè)計(jì)師或讀者樣式,這種表現(xiàn)提示就會(huì)被覆蓋,但是用戶代理的樣式不能將其覆蓋。
層疊樣式表中最基本的一個(gè)方面可能就是層疊了——沖突的聲明要通過這個(gè)層疊過程排序,并由此確定最終的文檔表示。這個(gè)過程的核心是選擇器及其相關(guān)聲明的特殊性,以及繼承機(jī)制。
在下一章中,我們將介紹多種用于為屬性值提供含義的單位,討論完下一章后,你就能清楚地了解全部基礎(chǔ)知識(shí),并做好進(jìn)一步學(xué)習(xí)指定文檔樣式的屬性的準(zhǔn)備。