詳解 CSS 屬性 - 優先級問題

當你將一個樣式添加到元素上卻發現不起做用時，那就是遇到優先級問題了。那麼應該如何處理 CSS 優先級問題呢，下面我總結了一些解決 CSS 優先級問題的經常使用法則。

樣式距離

咱們能夠經過使用外部樣式、內部樣式、內聯樣式等方法給元素添加指定的樣式，此時的優先級是:

外部樣式 < 內部樣式 < 內聯樣式

這個應該比較容易理解，也就是說離元素距離越近的樣式優先級越大。如：

<style type="text/css">
  div{color:blue;} //內部樣式
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部樣式(color:green)
<div style="color:red">my color</div>//內聯樣式

此時顯示的優先級是 red > blue > green。因此 my color 顯示爲紅色。

特殊的計算方法

假設有下面這段代碼：

<style type="text/css">
  div p.classSelector {color: blue}
  #idselector p {color: red}
</style>
<div id="idSelector">
  <p class="classSelector">my color</p>
</div>

咱們面對下面的 css，如何判斷優先級呢？

<style type="text/css">
  div p.classSelector {color: blue}
  #idselector p {color: red}
</style>

這裏介紹一種特殊的計算方法：

• 元素, 僞元素: 1 – (0,0,0,1)
• 類, 僞類, 屬性: 1 – (0,0,1,0)
• ID: 1 – (0,1,0,0)
• 內聯樣式: 1 – (1,0,0,0)

這裏的屬性指的是：

效果以下：

優先級從上往下依次增長，至於如何計算，一樣舉例說明：

• p: 1個元素– (0,0,0,1)
• div: 1個元素 – (0,0,0,1)
• #idSelector: 1個ID – (0,1,0,0)
• div#idSelector: 1個元素, 1個ID – (0,1,0,1)
• div#idSelector p: 2個元素, 1個ID– (0,1,0,2)
• div#idSelector p.classSelector: 2個元素, 1個類, 1個ID – (0,1,1,2)

因此如今咱們再來看上面的例子：

div p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)
  #idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)

因爲優先級上 (0,1,0,1) > (0,0,1,2)，因此咱們知道最後顯示的顏色爲紅色。

繼承

繼承是個比較好理解的概念，即子元素會繼承父元素的樣式。例如：

<div style="color:red">
  <p>my color</p>
</div>

上例中的 span 會繼承父元素 div 的樣式。但不是全部的屬性都會默認使用繼承的方式，好比 margin 和 padding 屬性。例如：

<div style="margin:10px;padding:10px">
  <p>my color</p>
</div>

此時，元素 p 並不會繼承父元素 div 的 margin 和 padding 樣式，除非你這麼作：

<div style="margin:10px;padding:10px">
  <p style="margin:inherit;padding:inherit">my color</p>
</div>

總結

1.首先找到全部做用在元素上的樣式。（不要忽略來自繼承的樣式）
2.計算樣式的做用距離，距離越近，優先級越大。
3.使用特殊的計算方法來判斷同距離內的樣式。
4.若是計算後的結果相同，那麼後聲明的樣式覆蓋先前聲明的樣式。
5.若是某個樣式中設置 !important，則不管它的優先級如何，都以該樣式爲準。（除非無可奈何，強烈不建議使用這個方法，由於這無疑是不符合 css 思想的用法）

參考

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/