CSS編寫中的屬性優先權問題解決方法

這篇文章主要介紹了CSS編寫中的屬性優先級問題,重點講解了元素之間的層級計算以及繼承關係,需要的朋友可以參考下

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

樣式距離
我們可以透過使用外部樣式、內部樣式、內聯樣式等方法來為元素新增指定的樣式，此時的優先權是:

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

<style type="text/css">   
  p{color:blue;} //内部样式   
</style>   
<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部样式(color:green)   
<p style="color:red">my color</p>//内联样式

此時顯示的優先權是 red > blue > green。所以 my color 顯示為紅色。

特殊的計算方法
假設有下面這段程式碼：

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

我們面對下面的css，如何判斷優先順序呢？

<style type="text/css">   
  p 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)
p: 1個元素– (0,0,0,1 )
#idSelector: 1個ID – (0,1,0,0)
p#idSelector: 1個元素, 1個ID – (0,1,0,1)
p#idSelector p: 2個元素, 1個ID– (0,1,0,2)
p#idSelector p.classSelector: 2個元素, 1個類別, 1個ID – (0,1,1,2)
所以現在我們再來看上面的例子：

p 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)，所以我們知道最後顯示的顏色為紅色。

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

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

上例中的 span 會繼承父元素 p 的樣式。但不是所有的屬性都會預設使用繼承的方式，例如 margin 和 padding 屬性。例如：

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

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

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

#總結
1.首先找到所有作用在元素上的樣式。 （不要忽略來自繼承的樣式）
2.計算樣式的作用距離，距離越近，優先權越大。
3.使用特殊的計算方法來判斷同距離內的樣式。
4.如果計算後的結果相同，那麼後宣告的樣式會覆寫先前宣告的樣式。
5.如果在某個樣式中設定 !important，則無論它的優先權為何，都以該樣式為準。 （除非迫不得已，強烈不建議使用這個方法，因為這無疑是不符合 css 思想的用法）

以上是CSS編寫中的屬性優先權問題解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！