CSS規則的執行順序

1、特殊性

首先來看一下這個例子將會發生的情形：

以下是程式碼片段： .grape { color:Blue; }  H1 { color: Red; }  <h1 class=”grape”>Meerkat <em>Central</em></h1>

 

H1和.grape都匹配上面的H1元素，那麼到底應該使用哪一個呢？

實踐證明.grape是正確答案，把句子顯示為藍色。

根據規範，一般的HTML元素選擇符(H1,P 等)具有特殊性1，類選擇符具有特殊性10，ID選擇符具有特殊性100，值越大權重就越大，就優先選用。

 

以下是程式碼片段： H1 { color: Red; } P EM { color: Blue; } .grape { color: Fuchsia; } P.bright { color: Yellow; } P.bright EM.dark{ color: Gray; } #ID01 { color: Red; }

 

2、繼承

在特殊性的框架下，被繼承的值具有特殊性0，也就是說任何顯式宣告的規則將會覆蓋其繼承樣式，即便這條規則具有多高的權重。

 

以下是程式碼片段： H1#ID01 { color: Red; } EM{ color: Gray; } <H1 ID=”ID01>Meerkat <EM><Central</EM></H1>

 

雖然ID選擇符特殊性最高，但由於在特殊性的框架下，繼承值只有特殊性0，因些Central會顯示為Gray顏色。

 3、STYLE元素

 還有sytle元素在CSS下權值定義為100，儘管ID選擇也一樣，實際上style元素比ID具有更高的特殊性。 

 

以下是程式碼片段： #ID01 EM{ color: Gray; } <H1 ID=”ID01″>Meerkat <EM style=”color: red;”>Central</EM>!</H1>

 

會顯示為red顏色。

4、重要性(!important)

!important具最高特特性比如說1000，因此!important規則會覆蓋內聯STYLE屬性的內容。

 

以下是程式碼片段： H1{ color: red !important; } <H1 style=”color:black;”>Meerkat Central!</H1>

 

將顯示為RED顏色。 一種特殊情形

 

以下是程式碼片段： P#warn { color: Red !important; } EM { color: Black; } <p id=”warn”>This text is red, but <em>emphasized text is black.</em></p>

 

雖然定義!important最高特殊性，但句子並沒有全部顯示為RED紅色，為什麼呢？也許我們得回頭看看前面的規則，在前面的第二點繼承中提“在特殊性的框架下，繼承值只有特殊性0。”因此即便定義!important，繼承裡的特殊性也只有0，所以顯示為特殊性為1的EM規則。

權重順序為：繼承 => HTML普通選擇符 => 類選擇符 =>style元素 => !important

5、層疊

1) 若兩條規則具有相同的權值、起源及特殊性，那在樣式表中最後出現的規則優先。

2) 任何位於文件中的規則都比引入的規則優先。

 

 

更理論一些的文章：

 

本文向大家描述一下CSS執行順序與優先權的問題，首先就是CSS規則的specificity(特殊性)，CSS2.1有一套關於specificity的計算方式，用一個四位的數字串(CSS2是三位)來表示，最終specificity越高的規則越特殊，在優先順序判定時也就越有優勢。

CSS執行順序與優先權的問題

CSS執行順序與優先權的問題其實就是一個衝突解決的問題，當同一個元素(或內容)被CSS選擇符選中時，就要按照優先權取捨不同的CSS規則，這其中涉及到的問題其實很多。

首先就是CSS規則的specificity(特殊性)，CSS2.1有一套關於specificity的計算方式，用一個四位的數字串(CSS2是三位)來表示，最終specificity越高的規則越特殊，在優先順序判定時也就越有優勢。關於specificity的具體計算在各種情況下的數字加成有如下一般規則：

◆每個ID選擇符(#someid)，加0,1,0,0。

◆每個class選擇符(.someclass)、每個屬性選擇符(形如[attr=””]等)、每個偽類(形如:hover等)加0,0,1,0

◆每個元素或偽元素(:firstchild)等，加0,0,0,1

其他選擇符包括全域性選擇符*，加0,0,0,0。相當於沒加，不過這也是一種specificity，後面會解釋。

按這些規則將數字串逐位相加，就得到最終計算得的specificity，然後在比較取捨時按照從左到右的順序逐位比較。

舉一些例子吧：

ExampleSourceCode

h1{color:red;} 
 
bodyh1{color:green;} 
——後者勝出 
h2.grape{color:purple;} 
 
h2{color:silver;} 
——前者勝出 
html>bodytabletr[id=”totals”]tdul>li{color:maroon;} 
 
li#answer{color:navy;} 
——後者勝

除了specificity還有一些其他規則

文內的樣式優先順序為1,0,0,0，所以始終高於外部定義。這裡文內樣式指形如<divstyle=”color:red”>blah</div>的樣式，而外部定義指經由<link>或<style>標籤定義的規則。

有!important宣告的規則高於一切。

如果!important宣告衝突，則比較優先權。

如果優先權一樣，則按照在原始碼中出現的順序決定，後來者居上。

由繼承而得到的樣式沒有specificity的計算，它低於一切其他規則(比如全域性選擇符*定義的規則)。

關於經由@import載入的外部樣式，由於@import必須出現在所有其他規則定義之前(如不是，則瀏覽器應該忽略之)，所以按照後來居上原則，一般優先權衝突時是佔下風的。

這裡需要提一下IE，IE是可以識別位置錯誤的@import的，但無論@import在什麼地方，它都認為是位於所有其他規則定義之前的，這可能會引發一些誤會。所以優先權問題雖然看起來簡單，但其背後還是有蠻複雜的機制的，需要多多留意。

轉載自：http://blog.sina.com.cn/s/blog_57e7d45a0100ybxk.html