<span id="sscyc"></span>

^{<noscript id="sscyc"></noscript>}

CSS教程：認識層疊規則互相作用

2024-07-11 08:25:00

字體：大中小

來源：轉載

供稿：網友

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

4.6.1層疊的順序
CSS的層疊對每一個樣式規則指定一個權重。如果要應用若干個規則，那么權重最大的那個規則具有優先權。層疊規則依據下面幾個步驟進行：
1.查找有沖突的元素
瀏覽器會找到那些存在疑問的元素和屬性的聲明，如果相關聯的選擇器匹配存在疑問的元素，則聲明適用。
2.樣式表的來源
按照規則的重要性（普通或者重要）和來源（用戶、制作者或者瀏覽器）來從低到高排序：
1)瀏覽器的缺省樣式；
2)用戶定義的普通樣式；
3)制作者定義的普通樣式；
4)制作者定義的重要性（“!important”聲明）樣式；
5)用戶定義的重要性（“!important”聲明）樣式。
提示：重要性（“!important”聲明），請參見本書[4.6.4重要性]一節。
對于制作者定義的外部CSS文件引入的規則，它們的權重取決于它們引入的順序。例如：
<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規則引入的其他樣式表，優先級規則同樣適用。
嵌入式樣式表的規則高于從文件引入的樣式規則。行內樣式表則又高于嵌入式樣式表。
3.選擇器的特殊性
聲明的第2排序基于選擇器的特殊性：特殊的選擇器超越一般的選擇器。偽元素和偽類分別被視為一般元素和一般類。
4.規則出現的先后次序
最后，根據規則出現的先后次序來排列。如果兩條規則具有相同的權重，相同的來源和相同的特殊性，則后出現的規則超越先出現的規則。
引入的樣式表中的規則被認為出現在樣式表本身的所有規則之前。
除了個別聲明的“!important”指定，上述策略給予制作者的樣式表比用戶樣式表更大的權重。

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