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在什麼地方，它都認為是位于所有其他規則定義之前的，這可能會引發一些誤會。是以優先權問題雖然看起來簡單，但其背後還是有蠻複雜的機制的，需要多多留意。