2.3 層疊
CSS屬性的一個(gè)最基本的事實(shí)是它們是層疊的,這也是稱(chēng)它們?yōu)镃SS的原因。但這意味著什么呢?層疊是一種用于解決瀏覽器支持的不同樣式表之間存在的潛在沖突的方法,它按優(yōu)先級(jí)順序應(yīng)用樣式,其根據(jù)包括樣式表的創(chuàng)建者、用于創(chuàng)建樣式的方法及選擇的屬性的類(lèi)型等。
2.3.1 樣式表創(chuàng)建者
所有現(xiàn)代瀏覽器都支持3種主要類(lèi)型的樣式表。按優(yōu)先級(jí)從高到低排列,分別是:
1. 文檔作者創(chuàng)建的樣式表
2. 用戶(hù)創(chuàng)建的樣式表
3. 瀏覽器創(chuàng)建的樣式表
這3種樣式表以相反的順序處理。首先,將Web瀏覽器中的默認(rèn)樣式應(yīng)用于文檔。如果沒(méi)有這些默認(rèn)樣式,那么不使用樣式表的Web頁(yè)面看上去會(huì)很糟糕。默認(rèn)樣式包括字體字型、字體大小和顏色、元素間距、表格邊框和間距及所有其他用戶(hù)想要的樣式。
接著,如果用戶(hù)創(chuàng)建了任何優(yōu)先于標(biāo)準(zhǔn)樣式的用戶(hù)樣式,則應(yīng)用這些用戶(hù)樣式,取代可能與此沖突的任何瀏覽器的默認(rèn)樣式。
最后,應(yīng)用當(dāng)前文檔的作者創(chuàng)建的任何樣式,取代瀏覽器默認(rèn)樣式或用戶(hù)創(chuàng)建的樣式。
2.3.2 創(chuàng)建樣式表的方法
可用3種不同的方式或方法創(chuàng)建樣式表。按優(yōu)先級(jí)從高到低排列,分別是:
1. 作為內(nèi)聯(lián)樣式
2. 作為嵌入式樣式表
3. 作為外部樣式表
同樣,這些樣式表創(chuàng)建方法以與優(yōu)先級(jí)相反的順序處理。因此,首先應(yīng)用所有外部樣式表,將它們的樣式應(yīng)用于文檔。
接著,應(yīng)用任何嵌入式樣式(位于<style>…</style>標(biāo)記中),任何與外部規(guī)則沖突的樣式獲得優(yōu)先權(quán)并覆蓋其他樣式。
最后,作為內(nèi)聯(lián)樣式直接應(yīng)用于元素的任何樣式(例如,<div style="…"…</div>>)獲得最高的優(yōu)先權(quán),覆蓋之前所有指派的所有屬性。
2.3.3 樣式表選擇器
選擇要樣式化的元素也有3種不同的方法。按優(yōu)先級(jí)從高到低排列,分別是:
1. 通過(guò)單獨(dú)的ID引用
2. 在組中通過(guò)類(lèi)引用
3. 通過(guò)元素標(biāo)記引用(例如,<p>或<b>)
根據(jù)受規(guī)則影響的元素?cái)?shù)目和類(lèi)型處理選擇器,這與前兩種解決沖突的方法稍有不同。這是因?yàn)橐?guī)則不必一次只應(yīng)用于一種選擇器,可以引用許多不同的選擇器。因此,需要有一種方法確定可包含任意選擇器組合的規(guī)則的優(yōu)先級(jí)。具體做法是計(jì)算每個(gè)規(guī)則的特殊性(specificity),將它們按最大作用范圍到最小作用范圍的順序排列。
計(jì)算特殊性的方法是根據(jù)之前編號(hào)列表中的選擇器類(lèi)型創(chuàng)建一個(gè)由3部分構(gòu)成的數(shù)字。這個(gè)復(fù)合數(shù)一開(kāi)始為[0,0,0]。當(dāng)處理規(guī)則時(shí),引用ID的每個(gè)選擇器將第1個(gè)數(shù)加1,因此復(fù)合數(shù)變成[1,0,0]。假定特定規(guī)則中有3個(gè)ID引用,那么復(fù)合數(shù)變成[3,0,0]。
然后,引用類(lèi)的選擇器的數(shù)目放在這個(gè)復(fù)合數(shù)的第二部分。假定有5個(gè),那結(jié)果為[3,5,0]。
最后,計(jì)算引用元素標(biāo)記的選擇器數(shù)目,將這個(gè)數(shù)字放在復(fù)合數(shù)的最后一個(gè)部分。假定有兩個(gè),則最終的復(fù)合數(shù)變成[3,5,2]。這是比較規(guī)則的特殊性所必需的。
如果復(fù)合數(shù)中每個(gè)類(lèi)型的數(shù)目為9或更少,可將其直接轉(zhuǎn)換成十進(jìn)制數(shù),這里這個(gè)數(shù)是352。數(shù)字較低的規(guī)則的優(yōu)先級(jí)較低,數(shù)字較高的規(guī)則的優(yōu)先級(jí)較高。如果兩個(gè)規(guī)則的值相等,則最近應(yīng)用的規(guī)則勝出。