CSS 優先級注意事項

1、優先級就是分配給指定的 CSS 聲明的一個權重，它由匹配的選擇器中的每一種選擇器類型的數值決定。

2、而當優先級與多個 CSS 聲明中任意一個聲明的優先級相等的時候，CSS 中最後的那個聲明將會被應用到元素上。

3、當同一個元素有多個聲明的時候，優先級才會有意義。因為每一個直接作用於元素的 CSS 規則總是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規則。

4、可以這樣來看：選擇器描述越具體越稀缺優先級越高，後面聲明的比前面聲明的選擇器優先級高(同類型的選擇器)。

選擇器類型

對優先級沒有影響的（可以理解為優先級非常低的）

1. 通配選擇符 (*)
2. 關係選擇符 + 相鄰兄弟選擇器> 子選擇器~ 通用兄弟選擇器' ' 後代選擇器
3. :not() 否定偽類

對優先級有影響的（下面的排序優先級依次變大）

1. 元素選擇器(h1 p div)
2. 偽元素 (::before ::after)
3. 類選擇器 (.class1) 和 屬性選擇器 (a[title] img[title*=hello]) 兩者優先級相同，聲明在後面的會覆蓋前面的
4. 偽類選擇器 (:hover)
5. ID 選擇器
   (#demo)

其他影響最終結果的

1、內聯樣式 style="xxx"

2、!important

一些要注意的情況

1. 偽元素不可選中（ID、class 都無法超越它）

 
 
 
 
 

 hello div
 

 

結果 我是偽元素 仍然不是紅色，原因就是 #box 描述的是 div，而偽元素是無法用其他選擇器選中的。這個偽元素的樣式繼承自 div。

我是偽元素

2、類選擇器和屬性選擇器它們的優先級是一樣的，改變下面代碼中的屬性選擇器 [name="lxfriday"] 和類選擇器 .box1 的位置，顏色會發生變化。

 
 
 
 
 

 hello div
 

 

綜上，對最終效果的影響是：!important > 內聯樣式 style > ID 選擇器 > 偽類選擇器 > 屬性選擇器 = class 選擇器 > 偽元素 > 元素(類型)選擇器 > 關係選擇器 > 通配符選擇器 理解優先級應該從選擇器對目標的描述準確程度，注意下面例子的效果：

!important

當在一個樣式聲明中使用一個 !important 規則時，此聲明將覆蓋任何其他聲明。雖然，從技術上講，!important 與優先級無關，但它與最終的結果直接相關。使用 !important 是一個壞習慣，應該儘量避免，因為這破壞了樣式表中的固有的級聯規則使得調試找bug變得更加困難了。當兩條相互衝突的帶有 !important 規則的聲明被應用到相同的元素上時，擁有更大優先級的聲明將會被採用。

不要在內聯樣式中使用 !important，小心被噴。內聯樣式已經具有極高的優先級了，如果選擇器中添加了 !important，可以考慮再定義一個更精確的選擇器來覆蓋 !important。

如果內聯樣式真的添加了 !important，則可以用 js 來消除（js 無法消除 class、ID 選擇器的 !important）。

 
 

 hello div
 

 
 

js 消除內聯樣式 !important

下面是一些優化的經驗：

1. 一定要優化考慮使用樣式規則的優先級來解決問題而不是 !important
2. 只有在需要覆蓋全站或外部 CSS 的特定頁面中使用 !important
3. 永遠不要在你的插件中使用 !important，別人將很難更改樣式
4. 永遠不要在全站範圍的 CSS 代碼中使用 !important

一些覆蓋 !important 的辦法：

1. 只需再添加一條帶 !important 的CSS規則，再給這個給選擇器更高的優先級（添加一個標籤，ID或類）；或是添加一樣選擇器，把它的位置放在原有聲明的後面（總之，最後定義一條規則比勝）;

 table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }

2. 或者使用相同的選擇器，但是置於已有的樣式之後;

td { height: 50px !important; }

td { height: 55px !important; } /* 應用這規則 */

3. 或乾脆改寫原來的規則，以避免使用 !important。

CSS 優先級需要注意的幾點

基於形式的優先級（Form-based specificity）

優先級是基於選擇器的形式進行計算的。在下面的例子中，儘管選擇器 *[id="foo"] 選擇了一個ID，但是它還是作為一個屬性選擇器來計算自身的優先級。

 
 
 
 
 

 hello div
 

 

顯示為綠色。雖然匹配了相同的元素，但是 ID 選擇器擁有更高的優先級。所以第一條樣式聲明生效。

 
 
 
 
 

 hello div
 

 

顯示為purple。

關於偽類和偽元素

偽類 是添加到選擇器的關鍵字，指定要選擇的元素的特殊狀態。例如，:hover 可被用於在用戶將鼠標懸停在按鈕上時改變按鈕的顏色。偽類使用 :xxx 的形式表示。常見偽類：

1. :link :visited :hover :active 對
2. :first-child :last-child :nth-child() :nth-last-child() :only-child
3. :not()
4. :focus

偽元素是一個附加至選擇器末的關鍵詞，允許你對被選擇元素的特定部分修改樣式。偽元素推薦寫法為::xx, 常見偽元素

1. ::before ::after
2. ::first-line
3. ::first-letter
4. ::selection

閱讀更多 雲影sky 的文章

關鍵字: 詳解 優先級 CSS