[讀書筆記] CSS權威指南2: 結構和層疊

層疊樣式表中最基本的一個方面可能就是層疊——衝突的聲明要通過這個層疊過程排序，並由此確定最終的文檔表示。這個過程的核心是選擇器及其相關聲明的特殊性，以及繼承機制。

特殊性

對於每個規則，用戶代理會計算選擇器的特殊性，並將這個特殊性附加到規則中的各個聲明。如果一個元素有兩個或多個衝突的屬性聲明，那麼有最高特殊性的聲明就會勝出。

選擇器的特殊性由選擇器本身的組件確定。特殊性值表述為4個部分，如：0，0，0，0。一個選擇器的具體特殊性如下確定：

對於選擇器中給定的各個ID屬性值，加0，1，0，0。

對於選擇器中給定的各個類屬性值，屬性選擇或偽類，加0，0，1，0。

對於選擇器中給定的各個元素和偽元素，加0，0，0，1。

內聯樣式，加1，0，0，0。

結合符和通配符選擇器對特殊性沒有任何貢獻

h1{color:red;}/* specifity = 0,0,0,1 */
p em{color:purple;}/* specifity = 0,0,0,2 */
.grape{color:purple;}/* specifity = 0,0,1,0 */
*.bright{color:yellow;}/* specifity = 0,0,1,0 */
p.bright em.dark{color:maroon;}/* specifity = 0,0,2,2 */
#id216{color:blue;}/* specifity = 0,1,0,0 */
div#sidebar *[href]{color:silver;}/* specifity = 0,1,1,1 */
h1+p{color:black;font-style:italic;}/* specifity = 0,0,0,2 */
<h1 style="color:green;">Green</h1> /* specifity = 1,0,0,0*/

重要性

CSS允許在這些聲明的結束分號之前插入 !important 來標誌。

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

標誌為!important的聲明並沒有特殊的特殊性值，不過要與非重要聲明分開考慮。實際上，所有!important聲明會分組在一起，重要聲明的特殊性衝突會在重要聲明內部解決，而不會與非重要聲明相混。如果一個重要聲明和一個非重要聲明衝突，勝出的總是重要聲明。

繼承

樣式不僅應用到指定的元素，還會應用到它的後代元素。

/*
將聲明color :gray;應用到ul元素時，這個元素會採用該聲明。這個值再沿著樹向下傳播到後代元素，並一直繼續，直到再沒有更多的後代元素繼承這個值為止。值絕對不會向上傳播，也就是說，元素不會把值向上傳遞到其祖先。
*/
/*
註意：在HTML中，對於向上傳播規則有一個例外：應用到body元素的背景樣式可以傳遞到html元素（html是文檔的根元素），相應地可以定義其畫布。
*/
ul {
    color: red;
}

一般地，大多數框模型屬性(包括外邊距、內邊距、背景和邊框)不能繼承。

繼承的值根本沒有特殊性，甚至連0特殊性都沒有。

只要id為toolbar的元素只包含純文本而不包含其他內容，這就能正常起作用。不過，如果這個元素中的文本都是超鏈接（a元素），用戶代理的超鏈接樣式就會占上風。在一個Web瀏覽器中，這意味著它們的顏色很可能是藍色，因為瀏覽器的樣式表可能包含以下規則：

a:link {color: blue;}

為剋服這個問題，必須如下聲明：

#toolbar {color: white; background: black;}

#toolbar a:link {color: white;}通過向工具條中的a元素直接指定規則才可以覆蓋預設的規則了。

而通配選擇器具有0特殊性，所以一旦應用了通配選擇器，它就會覆蓋繼承的值，所以通配選擇器往往有一種短路繼承的效果。這說明不加區別的使用通配選擇器可能存在奇怪的問題。

層疊

1. 按顯式權重對應用到該元素的所有聲明排序。標誌!important的規則的權重要高於沒有!important標誌的規則。
2. 按來源對應用到給定元素的所有聲明排序。共有3種來源：創作人員、讀者和用戶代理。正常情況下，創作人員的樣式要勝過讀者的樣式。有!important標誌的讀者樣式要強乾所有其他樣式，這包括有!important標誌的創作人員樣式。創作人員樣式和讀者樣式都比用戶代理的預設樣式要強。
   1. 讀者的!important樣式
   2. 創作者的!important樣式
   3. 創作者的正常樣式
   4. 讀者的正常樣式
   5. 用戶代理聲明的樣式
3. 按特殊性對應用到給定元素的所有聲明排序。有較高特殊性的元素權重要大於有較低特殊性的元素。
4. 按出現順序對應用到給定元素的所有聲明排序。一個聲明在樣式表或文檔中越後出現，它的權重就越大。如果樣式表中有導入的樣式表，一般認為出現在導入樣式表中的聲明在前，主樣式表中的所有聲明在後。