CSS層疊與繼承的使用深入剖析

2024-07-11 08:38:52

字體：大中小

來源：轉載

供稿：網友

CSS技術理論：CSS層疊與繼承
一、CSS層疊
我們知道文檔中的一個元素可能同時被多個CSS選擇器選中，每個選擇器都有一些CSS規則，這就是層疊。這些規則有可能不矛盾的，自然這些規則將會同時起效，然而有些規則是相互沖突的，例如：

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>CSS Cascadetitle>
<style type=”text/CSS”>
h1{color:Red;}
body h1{color:Blue;}
</style>
</head>
<body>
<h1>Hello 52CSS.com</h1>
</body>
</html>

為此需要為每條規則制定特殊性，當發生沖突的時候必須選出一條最高特殊性的規則來應用。CSS規則的特殊性可以用4個整數來表示，例如0，0，0，0.計算規則如下：
◆對于規則中的每個ID選擇符，特殊性加0，1，0，0
◆對于規則中每個類選擇符和屬性選擇符以及偽類，特殊性加0，0，1，0
◆對于規則中的每個元素名或者偽元素，特殊性加0，0，0，1
◆對于通配符，特殊性加0，0，0，0.
◆對于內聯規則，特殊性加 1，0，0，0
最終得到結果就是這個規則的特殊性。兩個特殊性的比較類似字符串大小的比較，是從左往右依次比較，第一個數字大的規則的特殊性高。上例中兩條規則的特殊性分別是0，0，0，1 和 0,0,0,2，顯然第二條勝出，因此最終字是藍色的。
注意，通配符的特殊性0,0,0,0看起來沒有作用，實際上不是，還有一種沒有特殊性的規則，0，0，0，0要比沒有特殊性更特殊，下面會介紹。
CSS還有一個!important標簽，用來改變CSS規則的特殊性。實際上，在解析CSS規則特殊性的時候，是將具有!important的規則和沒有此標簽的規則利用上述方法分別計算特殊性，分別選出特殊性最高的規則。最終合并的時候，具有任何特殊性的帶有!important標記的規則勝出。
二、CSS繼承
所謂繼承，就是父元素的規則也會適用于子元素。比如給body設置為color:Red;那么他內部的元素如果沒有其他的規則設置，也都會變成紅色。繼承得來的規則沒有特殊性。下面看一個簡單的例子：

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>CSS Cascadetitle>
<style type=”text/CSS”>
*{color:Blue;}
div{color:Black;}
.imp{color:Red !important;}
#content{color:Green;}
</style>
</head>
<body>
<div>Hello <span>52CSS.comspan> div>
<div id=”content”>
<p class=”imp”>Titlep>
Content Goes Here. </p>
</div>
</body>
</html>