CSS選擇符優先順序
1.計算優先順序的步驟
（1）如果一條宣告來自style屬性，也就是內聯樣式，那麼它具有最高的優先順序。如果不是，則轉入第二步。
（2）計算ID選擇符的數目。數目最大的宣告具有最高的優先順序。如果兩個或多個宣告具有相同的ID選擇符的數目（包括0），則轉入第三步。
（3）計算類選擇符、屬性選擇符和偽類選擇符的數目。總數最大的宣告具有最高的優先順序。如果兩個或多個宣告具有相同的總數，則轉入第四步。
（4）計算型別選擇符和偽元素選擇符的數目。總數最大的宣告具有最高的優先順序。如果兩個或多個宣告具有相同的總數，則最後面的宣告獲得最高的優先權。
在實際應用中，我們可以採用用逗號分隔的四個數字的形式來計算優先順序，即a,b,c,d。重要程度從左到右依次降低。
計算選擇符的優先順序如下所示：
- 計算a，如果宣告來自style屬性即內聯樣式，則計數為1，否則為0。
- 計算b，統計ID選擇符的數目。
- 計算c，統計類選擇符、屬性選擇符和偽類選擇符的總數。
- 計算d，統計型別選擇符和偽元素選擇符的總數。
2.例項
<p style="color:red;" class="color">紅色</p>body #index div#container p.color {
color:blue;
}首先來分析第一條程式碼。因為p標籤中使用了style屬性，這是一個內聯樣式，所以a的值為1，優先順序可以表示為1,0,0,0。
然後分析第二條程式碼。規則中的選擇符包括兩個ID選擇符#index和#container，一個類選擇符.color，三個型別選擇符body、div和p。則優先順序可表示為0,2,1,3。
比較第一位的數字，因為1比0大，所以內聯樣式的優先順序高。
3.通配選擇符的優先順序
先來看幾行程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>通配選擇符</title> <style> * h1 span { color:red; } h1 span { color:blue; } </style> </head> <body> <h1><span>通配選擇符</span></h1> </body> </html>
猜猜標題的顏色是紅色還是藍色？
如果你以為是紅色那就錯了，答案是藍色。
因為通配選擇符的優先順序為0，所有的組合符的優先順序均為0,。也就是說在計算的時候可以忽略它們。如果通配選擇符不是選擇符中的唯一元件，則它是可以省略的。在上述程式碼中，兩個規則中的選擇符其實是等價的，加不加通配選擇符都一樣。
但是有一種情況例外，那就是通配選擇符在中間的時候。請看下面的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5</title>
<style>
body span {
background-color:blue;
}
body * span {
background-color:red;
}
</style>
</head>
<body>
<h1><span><span>HTML5</span></span></h1>
<span>藍色</span>
</body>
</html>
選擇符body * span匹配的是span中的“HTML5”，而不匹配span中的“藍色”。在這種情況下，通配選擇符是不能省略的。
4.不同CSS引入方式選擇符的優先順序
對於通過link標籤引入的外部樣式表，在其他條件相同的情況下，後面的樣式表中的宣告的優先順序要高。而對於通過style標籤引入的內部樣式表和通過link標籤引入的外部樣式表同時存在的情況下，很多人存在一種誤解，認為內部樣式表中的宣告會自動覆蓋外部樣式中的宣告。實際上，如果在內部樣式表之後通過link標籤引入外部樣式表，那麼外部樣式表中的宣告將會覆蓋內部樣式表中的宣告。
在上面的程式碼中通過在style標籤之後link標籤引入外部樣式表如下：
body * span {
background-color:yellow;
}顯示結果：
