詳細解讀 CSS 優先級，終於忘不掉了

時間 2019-11-21

標籤詳細解讀 css 優先級終於忘不掉了欄目 CSS 简体版

原文原文鏈接

CSS 優先級注意事項

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

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

三、當同一個元素有多個聲明的時候，優先級纔會有意義。由於每個直接做用於元素的 CSS 規則老是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規則。html

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

選擇器類型優化

對優先級沒有影響的（能夠理解爲優先級很是低的）ui

通配選擇符 (*)
關係選擇符
- + 相鄰兄弟選擇器
- > 子選擇器
- ~ 通用兄弟選擇器
- ' ' 後代選擇器
:not() 否認僞類

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

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

其餘影響最終結果的插件

一、內聯樣式 style="xxx" <a style="color:red;"></a>調試

二、!importantcode

一些要注意的狀況

僞元素不可選中（ID、class 都沒法超越它）

<head>
    <style> .box1::after { content: "我是僞元素"; color: cyan; } #box { color: red; } </style>
  </head>
  <body>
    <div id="box" class="box1" name="lxfriday">
      hello div
    </div>
  </body>
複製代碼

結果 我是僞元素 仍然不是紅色，緣由就是 #box 描述的是 div，而僞元素是沒法用其餘選擇器選中的。這個僞元素的樣式繼承自 div。

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

<head>
    <style> .box1:hover { color: cyan; } [name="lxfriday"] { color: red; } .box1 { color: pink; } </style>
  </head>
  <body>
    <div id="box" class="box1" name="lxfriday">
      hello div
    </div>
  </body>
複製代碼

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

`!important`

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

不要在內聯樣式中使用 !important，當心被噴。內聯樣式已經具備極高的優先級了，若是選擇器中添加了 !important，能夠考慮再定義一個更精確的選擇器來覆蓋 !important。

若是內聯樣式真的添加了 !important，則能夠用 js 來消除（js 沒法消除 class、ID 選擇器的 !important）。

<body>
    <div id="box" class="box1" style="color: red !important">
      hello div
    </div>
    <script> document.querySelector("#box").style.color = "blue"; </script>
  </body>
複製代碼

下面是一些優化的經驗：

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

一些覆蓋 !important 的辦法：

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

table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }
複製代碼

或者使用相同的選擇器，可是置於已有的樣式以後;

td { height: 50px !important; }

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

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

CSS 優先級須要注意的幾點

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

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

<head>
    <style> *#foo { color: green; } *[id="foo"] { color: purple; } </style>
  </head>
  <body>
    <div id="foo">
      hello div
    </div>
  </body>
複製代碼

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

無視 DOM 樹中的距離

<head>
    <style> body h1 { color: green; } html h1 { color: purple; } </style>
  </head>
  <body>
    <h1 id="foo">
      hello div
    </h1>
  </body>
複製代碼

顯示爲purple。

關於僞類和僞元素

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

:link :visited :hover :active 對 <a> 標籤推薦使用這個順序
- link: 連接日常的狀態
- visited: 連接被訪問過以後
- hover: 鼠標放到連接上的時候
- active: 連接被按下的時候
:first-child :last-child :nth-child() :nth-last-child() :only-child
:not()
:focus