CSS規則層疊時的優先權演算法

css 規則的優先順序是web前端開發人員必須理解的一個概念，我們常用的添加樣式的方法有4種。

1、inline style 
2、embeded style 
3、external style 
4、user style  

inline style是醜陋的，它們穿梭在html文件中，與html元素扭成一團，對web前端開發人員造成了許多麻煩。它們往往以這樣的面目出現：

<p style="color:red;">this is a paragraph.</p>

embeded style比inline style紳士一些，它們也寄宿在html文檔中，但是它們不屑於與html元素扭成一團。它們往往在 

<style type="text/css" media="screen"> 
    p{ 
        color : red; 
    } 
</style>

external style是個貴族，它不願意同html待在一起，所以乾脆以外部文件的形式獨立存在。通常我們使用  元素或@import語句將它們導入html。 

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

我們應當盡量使用external style，我想理由很多，大家都知道，我也就不重複了。

還有一種user style與以上三者略有不同，如果你使用ie瀏覽器，那麼你可以在tools – internet options – general – appearance – accessibility – 的地方（原諒我沒有中文版的ie瀏覽器）。 

既然我們有如此多的添加style的方法，那麼難以避免樣式會產生層疊。如：

<p class="intro" style="color:red;">this is a paragraph.</p>

我們在使用以上inline style的同時，又在我們的external style中使用了：

p{ 
    color : yellow; 
}

我們甚至還在擁有class="intro" 的 

 元素上應用了：

p.intro{ 
    color : blue; 
}

這樣我們就 在同一元素的同一屬性 color 上，擁有多個css規則指定了值 。這種情況稱為層疊(cascading)。當層疊發生時，css parser將根據優先權演算法來決定最終選用的值。

優先權演算法依照先後順序考慮以下三個面向：
1、css規則的重要性及來源 
2、css規則的特殊性 
3、css規則在文件中出現的順序  

演算法過程分為一項4步驟： 

1、針對某一元素的某一屬性，列出所有給該屬性指定值的css規則。 如上例中，在 class="intro" 的 

 元素上，有三個css規則指定了 color 屬性。

2.根據聲明的重要性和來源進行優先排序 

重要性有兩種：
important  和normal（即非important）  

在css規則後加上 !important 的重要性要高於沒有增加的。 

來源有三種： 

user agent stylesheet – 瀏覽器預設樣式  

author stylesheet – 開發人員定義的樣式  

user stylesheet – 使用者在瀏覽器中定義樣式重要性與來源的優先順序從低到高是： 

user agent stylesheet  

user style sheets中的normal規則  

author style sheets中的normal規則  

author style sheets中的important規則  

user style sheets中的important規則  

經過以上排序，如果有一條css規則的優先級高於其他所有競爭規則，那麼演算法結束，傳回該最高優先權指定的值。如果有多條css規則具有最高優先級，那麼它們將要繼續競爭下去，演算法就會進入第3步。

3、依照特殊性（specificity）排序 

css將計算多條規則中指定每一規則的selector的特殊性值，該值越高，優先順序越高。 

特殊性值是一個由4個整數組成的一個類似數組的值：a,b,c,d，其中a的權重最高，依次類推，d的權重最低。 selector特殊性值的計算方法是：
如果該規則是一條inline style，那麼a = 1 
如果規則由selector指定，selector中出現的id selector的數量就是b的值 
如果該規則由selector指定，selector中出現的屬性selector（包括class selector）或偽類selector的數量總和就是c的值 
如果該規則由selector指定，selector中出現的元素selector或是偽元素selector的數量總和就是d的值。  

universal selector * 的特殊性值為0,0,0,0  

官方網站 提供了一些例子可以加深理解。 

根據特殊性值排序時，由於a的權重最高，因此先比較a，在a相同的情況，在比較b，依次類推。因此不論b,c,d值有多大，inline style總是具有最高的特殊性。 

如果根據上述特殊性排序後，有一條css規則的優先權高於其他所有競爭規則，那麼演算法結束，傳回該最高優先權指定的值。如果有多條css規則具有最高優先級，那麼它們將要繼續競爭下去，演算法就會進入第4步。

4、比較css規則在文件中出現的順序 

出現在後的總是比出現在前的具有更高的優先級，因此出現在最後的那句語句將會被當作該屬性的值。