CSS選擇器及其優先順序排序
一、 CSS選擇器分類
CSS的選擇器其實大類的話可以分為三類，即id選擇器、class選擇器、標籤選擇器。
用法如下：
其中，他們之間又可以以不同的方式進行組合，如下：
- 後代選擇器: 父代名 後代名 { 屬性名:屬性值; }
- 子代選擇器:父代名>子代名 { 屬性名:屬性值; }
- 群組選擇器: #name1, .name2, #name div { 屬性名:屬性值; }
- 偽類選擇器: name:偽類
- 通用(萬用字元)選擇器:* { 屬性名: 屬性值; } ……
常用的也就這些。
詳細的選擇器型別
下面列表中，選擇器型別的優先順序是遞增的：
- 型別選擇器（type selectors）（例如, h1）和 偽元素（pseudo-elements）（例如, ::before）
- 類選擇器（class selectors） (例如,.example)，屬性選擇器（attributes selectors）（例如, [type=“radio”]），偽類（pseudo-classes）（例如, :hover）
- ID選擇器（例如, #example）
通配選擇符（universal selector）(*), 關係選擇符（combinators） (+, >, ~, ’ ') 和 否定偽類（negation pseudo-class）(:not()) 對優先順序沒有影響。（但是，在 :not() 內部宣告的選擇器是會影響優先順序）。
給元素新增的內聯樣式 (例如, style=“font-weight:bold”) 總會覆蓋外部樣式表的任何樣式 ，因此可看作是具有最高的優先順序。.
例外的 !important 規則
當在一個樣式宣告中使用一個!important 規則時，此宣告將覆蓋任何其他宣告。雖然技術上!important與優先順序無關，但它與它直接相關。
使用 !important 是一個壞習慣，應該儘量避免，因為這破壞了樣式表中的固有的級聯規則 使得除錯找bug變得更加困難了。當兩條相互衝突的帶有 !important 規則的宣告被應用到相同的元素上時，擁有更大優先順序的宣告將會被採用。
一些經驗法則：
- 一定要優化考慮使用樣式規則的優先順序來解決問題而不是 !important
- 只有在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用 !important
- 永遠不要在全站範圍的 css 上使用 !important
- 永遠不要在你的外掛中使用 !important
取而代之，你可以：
- 更好地利用CSS級聯屬性
- 使用更具體的規則。在您選擇的元素之前，增加一個或多個其他元素，使選擇器變得更加具體，並獲得更高的優先順序
二、CSS選擇器優先順序
優先順序就是分配給指定的CSS宣告的一個權重，它由 匹配的選擇器中的 每一種選擇器型別的 數值 決定。
而當優先順序與多個CSS宣告中任意一個宣告的優先順序相等的時候，CSS中最後的那個宣告將會被應用到元素上。
當同一個元素有多個宣告的時候，優先順序才會有意義。因為每一個直接作用於元素的CSS規則總是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規則。
- 最高優先順序是 (直接在標籤中的設定樣式，假設級別為1000)
- 次優先順序是（ID選擇器 ,假設級別為100） #myDiv{color:Red;}
- 其次優先順序是（類選擇器，假設級別為10）.divClass{color:Red;}
- 最後優先順序是 （標籤選擇器，假設級別是 1） div{color:Red;}
- 那麼後代選擇器的優先順序就可以計算了啊
選擇器優先順序通俗的理解
優先順序：由高到低(從上到下)
-
!important
-
內聯(1,0,0,0)
-
id: (0,1,0,0)
-
類：(0,0,1,0)
-
偽類/屬性
-
元素：(0,0,0,1)
-
萬用字元
-
繼承
使用的規則也很簡單，就是 選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先 。雖然很簡單，但如果書寫的時候沒有注意，很容易就會導致CSS的重複定義，程式碼冗餘。
比如
.divClass span { color:Red;} 優先級別就是：10+1=11
從上面我們可以得出兩個關鍵的因素：
- 權值的大小跟選擇器的型別和數量有關
- 樣式的優先順序跟樣式的定義順序有關
關於CSS的執行效率：
- 樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者因為不匹配而退出。
- 如果你非常在意頁面的效能那千萬別使用CSS3選擇器。實際上，在所有瀏覽器中，用 class 和 id 來渲染，比那些使用同胞，後代選擇器，子選擇器（sibling, descendant and child selectors）對頁面效能的改善更值得關注。