【CSS】CSS選取器優先順序及!important屬性

  CSS的選取器是有權重的，當不同選取器的樣式設定有衝突時，會採用權重高的選取器設定樣式。權重（即優先順序）的規則如下，權重越高，優先順序越高：

  同一個元素可以使用多個規則來指定它的同一樣式（比如字型顏色），每個規則都有自己的選取器。顯然最終只有一個規則起作用（不可能一個字既是紅色又是綠色），那麼該規則的特殊性最高，特殊性即css優先順序。很多人僅僅知道選取器優先順序：ID>class>元素選取器，而不知道ID的優先順序為什麼大於class的優先順序。那麼css優先順序到底是怎麼計算的呢。

選取器的特殊性值表述為4個部分，用0,0,0,0表示：  行間樣式，加1,0,0,0.  ID選取器的特殊性值，加0,1,0,0。  類別選取器、屬性選取器或偽類，加0,0,1,0。  元素和虛擬元素，加0,0,0,1。  通配選取器*對特殊性沒有貢獻，即0,0,0,0。  最後比較特殊的一個標誌!important（權重），它沒有特殊性值，但它的優先順序是最高的，為了方便記憶，可以認為它的特殊性值為1,0,0,0,0。

  選取器特殊性值是從左向右排序的，特殊性值1,0,0,0大於以0開頭的所有特殊性值，即便它是0,99,99,99，優先順序依然比1,0,0,0要低。

  很多人都知道a標籤有四種狀態：連結訪問前、連結訪問後、滑鼠滑過、啟用，分別對應四種偽類:link、:visited、:hover、:active，並且這四個偽類如果對同一個元素設定同一個屬性，那它們的聲明順序還有一定要求，一般大家都遵循“愛恨原則LVHA”（LoVe HAte），為什麼是這個順序。不能是其它順序嗎。

  根據css優先順序計算規則，偽類的特殊性值是0,0,1,0，4個偽類的特殊性值相同，那麼後面聲明的規則優先順序高。當滑鼠滑過a連結時，滿足:link和:hover兩個偽類，要改變a標籤的顏色，就必須將:hover偽類在:link偽類後面聲明；同理，當滑鼠點擊啟用a連結時，同時滿足:link、:hover、:active三種狀態，要顯示a標籤啟用時的樣式（:active），必須將:active聲明放到:link和:hover之後。因此得出LVHA這個順序。這個順序能不能變。可以，但也只有:link和:visited可以交換位置，因為一個連結要麼訪問過要麼沒訪問過，不可能同時滿足，也就不存在覆蓋的問題。

  前面提到!important屬性，!important是用來使IE6和IE7、IE8、Firefox(Firefox)、google等瀏覽器做相容的，但IE6不能執行!important。當 !important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪個位置. 儘管如此, !important規則還是與優先順序毫無關係.使用 !important不是一個好習慣，因為它改變了你樣式表本來的級聯規則，從而難以調試。

在使用!important時需要注意： Never 永遠不要在全站範圍的 css 上使用 !important Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者YUI ）的特定頁面中使用  !important Never 永遠不要在你的外掛程式中使用 !important Always 要最佳化考慮使用樣式規則的優先順序來解決問題而不是 !important

什麼時候應該使用：

A) 一種情況

  你的網站上有一個設定了全站樣式的CSS檔案，同時你（或是你同事）寫了一些效果通常都是很差的行內樣式（行內樣式的優先順序是最高的）。在這種情況下，你就可以在你全域的CSS檔案中寫一些!important的樣式來覆蓋掉那些直接寫在元素上的行內樣式。

B) 另一種情況

#someElement p {    color: blue;}p.awesome {    color: red;}

  在外層有 #someElement 的情況下，你怎樣能使 awesome 的段落變成紅色呢。這種情況下，如果不使用!important，第一條規則永遠比第二條的優先順序更高。

怎樣覆蓋掉 !important：

很簡單，你只需要再加一條!important 的CSS語句，將其應用到更高優先順序的選取器（在原有基礎上添加額外的標籤、class或id選取器）上；或是保持選取器一樣，但添加的位置需要在原有聲明的後面（優先順序相同的情況下，後邊定義的會覆蓋前邊定義的）。

#test.a{  color: red !important;     <!--儘管這條聲明在前，但是仍會覆蓋下邊的樣式-->}a{  color: green !important;}

或：

a{  color: green !important;}a{  color: red !important;     <!--同樣的選取器，後邊的聲明會覆蓋前邊的-->}

Author:致知

Sign:路漫漫其修遠兮，吾將上下而求索。