CSS規則的執行順序

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; } /* 特殊性 = 1 */ P EM { color: Blue; } /* 特殊性 = 2 */ .grape { color: Fuchsia; } /* 特殊性 = 1 0 */ P.bright { color: Yellow; } /* 特殊性 = 11 */ P.bright EM.dark{ color: Gray; } /* 特殊性 = 12 */ #ID01 { color: Red; } /* 特殊性 = 100 */

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

     H1#ID01 { color: Red; } /* 特殊性 = 101 */ EM{ color: Gray; } /* 特殊性 = 1 */ <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) 任何位於文檔中的規則都比引入的規則優先。