CSS教程：認(rèn)識(shí)層疊規(guī)則互相作用

2024-07-11 08:42:54

字體：大中小

供稿：網(wǎng)友

在本書的[2.3.1(X)HTML與瀏覽器內(nèi)置樣式]一節(jié)曾經(jīng)介紹過，樣式表可能有三個(gè)不同的來源：制作者、用戶和瀏覽器。這三個(gè)來源的樣式表可能在范圍上有重疊，它們根據(jù)層疊規(guī)則互相作用。

4.6.1層疊的順序
CSS的層疊對每一個(gè)樣式規(guī)則指定一個(gè)權(quán)重。如果要應(yīng)用若干個(gè)規(guī)則，那么權(quán)重最大的那個(gè)規(guī)則具有優(yōu)先權(quán)。層疊規(guī)則依據(jù)下面幾個(gè)步驟進(jìn)行：
1.查找有沖突的元素
瀏覽器會(huì)找到那些存在疑問的元素和屬性的聲明，如果相關(guān)聯(lián)的選擇器匹配存在疑問的元素，則聲明適用。
2.樣式表的來源
按照規(guī)則的重要性（普通或者重要）和來源（用戶、制作者或者瀏覽器）來從低到高排序：
1)瀏覽器的缺省樣式；
2)用戶定義的普通樣式；
3)制作者定義的普通樣式；
4)制作者定義的重要性（“!important”聲明）樣式；
5)用戶定義的重要性（“!important”聲明）樣式。
提示：重要性（“!important”聲明），請參見本書[4.6.4重要性]一節(jié)。
對于制作者定義的外部CSS文件引入的規(guī)則，它們的權(quán)重取決于它們引入的順序。例如：
<linkrel="stylesheet"href="basic.css"type="text/css"media="all"/>
<linkrel="stylesheet"href="font.css"type="text/css"media="all"/>

則font.css中的定義高于basic.css中的定義。
對于在樣式表中使用@import規(guī)則引入的其他樣式表，優(yōu)先級規(guī)則同樣適用。
嵌入式樣式表的規(guī)則高于從文件引入的樣式規(guī)則。行內(nèi)樣式表則又高于嵌入式樣式表。
3.選擇器的特殊性
聲明的第2排序基于選擇器的特殊性：特殊的選擇器超越一般的選擇器。偽元素和偽類分別被視為一般元素和一般類。
4.規(guī)則出現(xiàn)的先后次序
最后，根據(jù)規(guī)則出現(xiàn)的先后次序來排列。如果兩條規(guī)則具有相同的權(quán)重，相同的來源和相同的特殊性，則后出現(xiàn)的規(guī)則超越先出現(xiàn)的規(guī)則。
引入的樣式表中的規(guī)則被認(rèn)為出現(xiàn)在樣式表本身的所有規(guī)則之前。
除了個(gè)別聲明的“!important”指定，上述策略給予制作者的樣式表比用戶樣式表更大的權(quán)重。

4.6.2特殊性的計(jì)算
既然有層疊的規(guī)則，那么，如果有如下代碼，其在瀏覽器內(nèi)會(huì)如何顯示呢？
.warning{color:red;}
p{color:green;}
<pclass=”warning”>層疊和繼承的規(guī)則如何實(shí)現(xiàn)？
此代碼在瀏覽器內(nèi)顯示如圖4-31所示。
/web/css/selectors/031.gif

圖4-31選擇器的特殊性
這是由于類選擇器“warning”和類型選擇器“p”的“特殊性”不同。
特殊性（specificity）描述了不同選擇器的相對權(quán)重（weight）。一個(gè)選擇器的特殊性是這樣計(jì)算的：
·如果CSS屬性是通過(X)HTML元素的style屬性定義的，則記為a=1，否則記為0；
由于style屬性是寫在(X)HTML標(biāo)簽內(nèi)的，因此不存在選擇器，所以：a=1,b=0,c=0,且d=0；
·計(jì)算選擇器中ID選擇器的數(shù)量，計(jì)為b；
·計(jì)算選擇器中類選擇器、屬性選擇器和偽類的數(shù)量，計(jì)為c；
·計(jì)算選擇器中類型選擇器的數(shù)量，計(jì)為d；
·忽略偽元素。
將這4個(gè)數(shù)字（a,b,c,d）相連（數(shù)字進(jìn)制要以大的為準(zhǔn)），得到特殊性。例如：
{……}特殊性=0,0,0,0
li{……}特殊性=0,0,0,1
ulli{……}特殊性=0,0,0,2
ulol li{……}特殊性=0,0,0,3
h1 [rel="up"]{……}特殊性=0,0,1,1
ulolli.warning{……}特殊性=0,0,1,3
li.menu.level{……}特殊性=0,0,2,1
#x34y{……}特殊性=0,1,0,0
<pstyel=”……”>特殊性=1,0,0,0
特殊性高的規(guī)則會(huì)取代特殊性低的規(guī)則，無論其書寫的先后順序如何，例如：
h1{colorred;}0,0,0,1
bodyh1{colorgreen;}0,0,0,2（勝出）
或者：
h2.grape{colorpurple;}0,0,1,1(勝出)
h2{colorsilver;}0,0,0,1

4.6.3繼承和特殊性
在特殊性的框架下，繼承的特殊性為“0”。也就是說，任何顯式的規(guī)則聲明都會(huì)覆蓋掉繼承的樣式，例如有如下代碼：
em{color:blue;}
p.list{color:gray;}
<pclass="list">繼承的特殊性為“0”。
雖然“p.list”的特殊性為“0,0,1,1”，但是，對“em”的color聲明還是會(huì)覆蓋掉從“p.list”繼承的color樣式，因此在瀏覽器內(nèi)顯示如圖4-32所示。
/web/css/selectors/032.gif

圖4-32繼承與特殊型
因此，如果需要讓p內(nèi)的em能呈現(xiàn)和p一樣的顏色，則需要如下定義：
p.list,
p.listem{colorgray;}

4.6.4重要性
雖然層疊和特殊性決定了CSS規(guī)則的最后應(yīng)用效果，但是，也可以通過聲明某個(gè)規(guī)則的“重要性”來提高此規(guī)則的權(quán)重，例如圖4-33所示。
/web/css/selectors/033.gif

圖4-33重要性的表現(xiàn)
雖然ID選擇器的特殊性高于類型選擇器，但是由于類型選擇器（div）屬性值后面添加了“!important”重要性聲明，因此“color:red”這條聲明的特殊性最高。
“!important”重要性聲明的權(quán)重甚至高于內(nèi)聯(lián)式樣式，例如有如下代碼，其在瀏覽器內(nèi)顯示如圖4-34所示。
div{color:red!important;}
<divstyle="color:blue;">設(shè)定了style的div</div>
/web/css/selectors/034.gif

圖4-34重要性的權(quán)重高于內(nèi)嵌式樣式
在CSS1中，制作者的“!important”規(guī)則超越用戶的“!important”規(guī)則。但是在CSS2中，用戶的“! important”規(guī)則具有最高的優(yōu)先級，這樣可以讓網(wǎng)頁更具易用性，例如有些視力不好的用戶，可能會(huì)設(shè)定比較大的字體，這樣就可以防止制作者定義了過小的字體而使用戶閱讀困難。

4.6.5非CSS的表現(xiàn)類內(nèi)容
現(xiàn)在仍然有一些制作者在(X)HTML文檔內(nèi)插入一些表現(xiàn)類的內(nèi)容，例如標(biāo)簽和align屬性，這些表現(xiàn)類的內(nèi)容被認(rèn)為具有0特殊性，并且被當(dāng)作是插入在作者樣式表的開頭部分，因此可能會(huì)被后面定義的樣式規(guī)則覆蓋。
例如下列代碼在瀏覽器內(nèi)顯示如圖4-35所示。
p{
background:yellow;
text-align:left;
}
<palign="right"><palign="right">，CSS：text-align:left;
/web/css/selectors/035.gif

圖4-35重要性的權(quán)重高于內(nèi)嵌式樣式
由4-35讀者可以看到，雖然的align屬性定義為“right”，即右對齊，但是由于CSS中定義了“text-align:left;”，因此文字還是左對齊顯示。
但是，如果是下面的代碼：
.test{color:green;}
<pclass="test">p內(nèi)的示例<fontcolor="blue">文字。
則內(nèi)的文字依然是藍(lán)色（blue），因?yàn)閷τ?lt;font>，的color屬于繼承，因此標(biāo)簽內(nèi)的屬性高于繼承值，但是如果增加CSS規(guī)則：
font{color:red;}
則內(nèi)的文字會(huì)變?yōu)榧t色（red），即“color="blue"”被CSS的“color:red;”覆蓋。

上一篇：CSS教程：理解繼承屬性及應(yīng)用

下一篇：理解(X)HTML的文檔結(jié)構(gòu)