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 思想的用法）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com