CSS學習筆記（三）：繼承、結構和層疊

要解決的問題：當兩條樣式規則衝突時，瀏覽器會如何決定採用哪一條渲染頁面？

每個合法的文檔都會生成一個文檔樹（JS裏面的DOM？），從而根據各個元素的祖先、兄弟關係來選擇元素，應用樣式規則。

1 特殊性（或稱具體性、權值）

同一個元素有多條規則時，通過給每條聲明中不同元素賦予不同的值，計算這條聲明的值，取值比較大的聲明將被應用。

具體計算規則：值分爲4個部分：0,0,0,0

1. 給定了ID屬性值的，加0,1,0,0
2. 給定了類、屬性選擇或僞類的，加0,0,1,0
3. 各個元素或僞元素，加0,0,0,1
4. 結合符和通配符不計算

舉例如下：

h1 {color: red;}/*特殊性值爲 0,0,0,1*/
p em {color: red;}/*特殊性值爲 0,0,0,2*/
.banner {color: red;}/*特殊性值爲 0,0,1,0*/
div#sidebar {color: red;}/*特殊性值爲 0,1,0,1*/
p.bright em.dark {color: red;}/*特殊性值爲 0,0,2,2*/

明顯，當有規則

h1.grape {color: red;}/*特殊性值爲 0,0,1,1*/
h1 {color: red;}/*特殊性值爲 0,0,0,1*/

時，第一條規則將被應用

內聯樣式特殊性
所有的內聯樣式特殊性均爲1,0,0,0 就是說，內聯樣式有最高的優先權。（CSS2.1 新增）

重要性
有時有某個特別重要的樣式規則，需要忽略其他的規則時，CSS2.1允許在其聲明的結束符（分號）之前加上 ！important 來進行標識，如

p.em{color:#333 !important; background: white;}

2 繼承

基於CSS的繼承機制，樣式不僅會應用到指定元素，還會應用到它的後代元素。
例如，將

h1 {color: green;}

應用到

<h1>Where are<em>YOU!</em></h1>

時，不僅h1元素會變綠色，em元素也會繼承性的變成綠色。

繼承對列表也有效（無論是ol或者ul）

定義的框模型無法繼承，繼承也無法向上進行，除了body ，對body所設定的背景樣式也會傳遞到html

關於0特殊性

繼承的值沒有特殊性，通配選擇器爲0特殊性，0特殊性強於無特殊性
如對

<h1 id="aaa">What Do You <em>See!</em></h1>
<p>Welcome</p>

應用樣式

h1#aaa{color: green;}
*{color: red;}

因爲通賠選擇器的0繼承性大於繼承的值，所以最終em會顯示爲紅色而不是綠色，如圖

3 層疊

對特殊性衝突的聲明，CSS會按照層疊的方式選擇應用他們，具體規則爲：

1. 有！important 標誌的聲明優先於沒有！important 標誌的聲明。
2. 計算特殊性，特殊性大的聲明優先在前。
3. 按聲明的出現順序排序，一個聲明在html文檔或CSS樣式表中越靠後，則越優先。若有導入樣式表，導入樣式表優先在前，主樣式表在後。