當你將一個樣式添加到元素上卻發(fā)現(xiàn)不起作用時，那就是遇到優(yōu)先級問題了。那么應該如何處理 CSS 優(yōu)先級問題呢，下面我總結了一些解決 CSS 優(yōu)先級問題的常用法則。
樣式距離
我們可以通過使用外部樣式、內(nèi)部樣式、內(nèi)聯(lián)樣式等方法給元素添加指定的樣式，此時的優(yōu)先級是:
外部樣式 < 內(nèi)部樣式 < 內(nèi)聯(lián)樣式
這個應該比較容易理解，也就是說離元素距離越近的樣式優(yōu)先級越大。如：
代碼如下:
<style type="text/css">
div{color:blue;} //內(nèi)部樣式
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部樣式(color:green)
<div style="color:red">my color</div>//內(nèi)聯(lián)樣式
此時顯示的優(yōu)先級是 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，如何判斷優(yōu)先級呢？
代碼如下:
<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)
內(nèi)聯(lián)樣式: 1 – (1,0,0,0)
這里的屬性指的是：
效果如下：
優(yōu)先級從上往下依次增加，至于如何計算，同樣舉例說明：
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)
所以現(xiàn)在我們再來看上面的例子：
代碼如下:
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)
由于優(yōu)先級上 (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.計算樣式的作用距離，距離越近，優(yōu)先級越大。
3.使用特殊的計算方法來判斷同距離內(nèi)的樣式。
4.如果計算后的結果相同，那么后聲明的樣式覆蓋先前聲明的樣式。
5.如果某個樣式中設置 !important，則無論它的優(yōu)先級如何，都以該樣式為準。（除非迫不得已，強烈不建議使用這個方法，因為這無疑是不符合 css 思想的用法）
樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內(nèi)部引用多個外部樣式表。當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權。
•瀏覽器缺省設置
•外部樣式表
•內(nèi)部樣式表（位于 <head> 標簽內(nèi)部）
•內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。這只是一個大方面的優(yōu)先級，在前面文章中我們講過CSS有很多選擇器，那么對于同種樣式的CSS，各個選擇器的優(yōu)先級又是如何呢？
我們將某一個CSS看成一個三位數(shù)，通過比較數(shù)字的大小來獲取優(yōu)先級的高低，那么就會相當簡單。在這里可以通過下面的規(guī)則來定義各個選擇器對應的數(shù)字。
•百位數(shù)是該選擇器上的id的數(shù)量的總和；
•十位數(shù)是用在該選擇器上的其它屬性選擇器和偽類的總和。這里包括class (.example) 和屬性選擇器(比如 li[id=red])；
•個位數(shù)是計算元素(就像table、p、div、*等等)和偽元素(就像:first-line等)；
•如果兩個選擇器對應的數(shù)字相等，也就是具有同樣的優(yōu)先級，在樣式表中后面的那個起作用。
•標有"!important"的規(guī)則具有最高優(yōu)先級，例如H1{color:black !importan; font-family:sans-serif}，前景色被標為important，這個前景色具有很高的優(yōu)先級。但是這種聲明容易引起混亂，因此通常使用得較少。
選擇器 數(shù)值
h1 {color:blue;} 1
p em {color:purple;} 1 + 1 = 2
.apple {color:red;} 10
p.bright {color:yellow;} 1 + 10 = 11
p.bright em.dark {color:brown;} 1 + 10 + 1 + 10 = 22
#id316 {color:yellow} 100
一般我們還可以通過瀏覽器的插件來查看，到底哪個CSS起作用，比如Firebug(Firefox)、Developer Tools(IE8)等。上面我們介紹到當優(yōu)先級相同時，哪個CSS起作用取決于所處的位置，通常后面的CSS優(yōu)先級要高。但是對于IE瀏覽器，具有相同數(shù)值的動態(tài)CSS取決于添加的順序前后，而不是添加的位置前后；后添加的優(yōu)先級要高。
原則一 - 繼承不如指定。
原則二 - #ID > .class > 標簽選擇符。
原則三 - 越具體越強大。
原則四 - 標簽#id >#id ; 標簽.class > .class。
原則五 - 原則一 > 原則二 > 原則三 > 原則四。
更多信息請查看IT技術專欄
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試