在HTML文件中引入CSS樣式有三種方法：
- 外部樣式：通過link標簽引入CSS樣式；
- 內頁樣式：寫在HTML頁面里面的style標簽里面；
- 行內樣式：寫在對應標簽的style屬性里面。
我知道一般情況下使用外部樣式，減少代碼冗余，同時便於后期維護。但如果同時用三種方式引入相同的CSS樣式，誰的優先級更高呢？
就做了個小測試：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <title>css樣式優先級</title> <link href="index.css" rel="stylesheet" type="text/css"/> <style type="text/css"> .box{ background:red; border:1px solid black; width:100px; height:100px; } </style> </head> <body> <div style="background:yellow;width:100px;height:100px;" class="box"> </div> </body> </html>
外部CSS樣式代碼：
.box{
width:100px;
height:100px;
background:blue;
}
- 外部樣式：blue
- 內頁樣式：red
- 行內樣式：yellow
最后顯示的效果是：
把行內CSS的背景樣式去掉后，顯示：
可見，CSS三種位置寫法的優先級是：行內樣式＞內頁樣式＞外部樣式
從CSS代碼存放位置看權重優先級：內嵌樣式 > 內部樣式表 > 外聯樣式表。其實這個基本可以忽視之，大部分情況下CSS代碼都是使用外聯樣式表。
從樣式選擇器看權重優先級：important > 內嵌樣式 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符。
- important的權重為1,0,0,0
- ID的權重為0,1,0,0
- 類的權重為0,0,1,0
- 標簽的權重為0,0,0,1
- 偽類的權重為0,0,1,0
- 屬性的權重為0,0,1,0
- 偽對象的權重為0,0,0,1
- 通配符的權重為0,0,0,0
id 的選擇器為什么要這么寫 li#first？
一. 一個疑問？
看到過一篇關於 CSS 的文章，其中說到：對於類似 li#first 這樣的選擇器，由於使用 id 就已經可以確定元素了，沒有必要再寫上前面的 li, 直接寫上 #first 這樣的 id 選擇器就可以了。聽起來說得不錯，簡單測試一下也沒有問題。
可是，我們經常看到帶有元素名稱的選擇器，例如，在微軟的項目模板中就有大量的帶有元素名稱的選擇器，如果沒有用的話，為什么要這樣寫呢？
ul#navlist
{
float: right;
}
ul#navlist li
{
display: inline;
}
二. 問題出現了！
寫一個簡單的菜單，使用 ul 和 li 實現，菜單項之間使用邊框來實現間隔線。
html 代碼如下：
<ul id="navlist">
<li class="first"><a href="/" id="current">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">ShoppingCart</a></li>
<li><a href="#">Admin</a></li>
</ul>
使用下面的樣式表，首先通過為所有的超級鏈接增加一個左邊框來畫出間隔的虛線，然后將第一個菜單項的左邊框去掉，我的第一個樣式使用了 .first a。
ul#navlist li
{
display
:
inline
;
}
ul#navlist li a
{
border-left
:
1px
dotted
#8A8575
;
padding
:
10px
;
margin-top
:
10px
;
color
:
#8A8575
;
text-decoration
:
none
;
float
:
left
;
}
.first a
{
border
:
none
;
}
|
看一下效果，完全沒有反應。
還有的地方說 id 選擇器的級別比較高，那么將類改成 id 。
<li id=
"first"
><a href=
"/"
id=
"current"
>Home</a></li>
|
將樣式表也進行相應的修改。
#first a
{
border
:
none
;
}
|
可是結果呢？巋然不動！
用火狐的 firebug 看一看，被忽略了。
三. 探源
為什么我的樣式被秒殺了？
網上有大量的文章，但是說法並不一致，有的說要考慮三個級別，可是也有的說需要考慮四個級別，但是總的方向大致是關於層疊的。
不如到 W3C 的網站上看一個究竟。相關的標准在 這個頁面 可以看到，目前為止的 CSS 標准有三個: CSS1, CSS2, 以及 CSS3。
CSS1 是最早的標准，其中關於層疊順序的描述在 這里，還提供了一個簡單的示例進行說明。
LI {...}
/* a=0 b=0 c=1 -> specificity = 1 */
UL LI {...}
/* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {...}
/* a=0 b=0 c=3 -> specificity = 3 */
LI.
red
{...}
/* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.
red
{...}
/* a=0 b=1 c=3 -> specificity = 13 */
#x
34
y {...}
/* a=1 b=0 c=0 -> specificity = 100 */
|
在 CSS1 中將優先級分為三組，將 id 選擇器作為 a 組，類選擇器作為 b 組，元素名作為 c 組，每組中出現一次，計數一次，按照先 a 組進行比較，相同的情況下，使用 b 組進行比較，最后是 c 組。什么選擇器的優先級別高，什么選擇器提供的樣式有效。比如在上面的例子中，第 5 組使用 id 的級別最高，所以，這組的樣式設置生效，而其他的設置將會被忽略掉。
在 CSS2 中，又增加了關於行內說明 style 的組，所以參與比較的組成為了 4 組，其中 style 的優先級別最高。同樣，在 CSS2 的標准說明中也提供了樣例。
* {}
/* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {}
/* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}
/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {}
/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {}
/* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h
1
+ *[rel=up]{}
/* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.
red
{}
/* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.
red
.
level
{}
/* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x
34
y {}
/* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=
""
/* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<br><br>
|
<style type=
"text/css"
>
#x
97
z {
color
:
red
}
</style>
<p id=
"x97z"
style=
"color: green"
>
</p>
在這個示例中，style 的優先級別最高，所以將會覆蓋掉通過 id 進行的設置，顏色為綠色。
四. 解決問題
通過上面的分析可以看到，僅僅提供選擇器並不足以能夠生效，還要看選擇器的優先級別，在我們的問題中，即使使用 id 來選擇第一個菜單項：#first a ，包括了一個 id 和一個元素名，那么所得的優先級別為：
a=0, b=1, c=0, d=1
可是，通用的選擇器是這樣的：ul#navlist li a，優先級中卻包括了一個 id, 還有 3 個元素名稱，所以優先級別為：
a=0, b=1, c=0, d=3
所以我們的選擇器沒有比過通用的選擇器，悲劇發生了！
知道了原因，問題也就簡單了，提高我們選擇器的優先級別，超過通用選擇器的優先級就可以了，比如，我們可以寫成這樣：
ul#navlist li#first a
|
現在的優先級是多少呢？
a=0, b=2, c=0, d=3
在 b 組比較的時候就已經超過了，看看是否已經成功了！
還可以加上重要性說明，也可以解決。!important 必須寫在樣式與分號之間，每個樣式必須單獨聲明。
#first a
{
border
:
none
!important
;
}
|
看來選擇器不是那么簡單呀！
------------------------
感謝司徒正美的奉獻，轉載地址：http://www.cnblogs.com/rubylouvre/archive/2012/09/26/2524700.html