我將CSS優(yōu)先級總結(jié)為四個級別的優(yōu)先，按照從高到低的順序排列分別是標(biāo)簽離修飾內(nèi)容近，!important相關(guān)，選擇器級別，CSS代碼位置靠下。在比較的時候從高往低比較。如果在某一優(yōu)先級層面上已經(jīng)比較出不同，就不需要繼續(xù)比較；否則進(jìn)入下一級的比較。下面詳細(xì)的描述這四個優(yōu)先級
第一優(yōu)先級為標(biāo)簽離修飾內(nèi)容近。例如<div id="a"><div class="b">內(nèi)容</div></div>中，b的位置就比a離文字更近，當(dāng)選擇#a和.b的時候，.b的優(yōu)先級更高
第二優(yōu)先級為!important相關(guān)的優(yōu)先，順序為!important用戶，!important作者，作者，用戶，瀏覽器。其中用戶是閱讀網(wǎng)頁的人，作者是寫網(wǎng)頁代碼的人，瀏覽器指瀏覽器的默認(rèn)樣式。在瀏覽網(wǎng)頁的時候我們可以發(fā)現(xiàn)，對于未定義過CSS字體大小的網(wǎng)頁，可以通過點擊瀏覽器上面的字體大小改變字體，這就是用戶高于瀏覽器的例子。而定義過CSS字體大小的網(wǎng)頁，則無法通過瀏覽器上面的字體大小改變字體，這就是作者高于用戶的例子。
第三為選擇器級別的優(yōu)先。選擇器有四種，按照優(yōu)先級排列為：行內(nèi)樣式(style="")，id選擇器(#name{})，class選擇器(.name{})，標(biāo)簽選擇器(div{})。在進(jìn)行比較的時候，先比較最高位的數(shù)量，如果相同，比較低位的數(shù)量，直到得出結(jié)果。如果所有位的數(shù)量均相同，進(jìn)入第四優(yōu)先級的比較。
第四為選擇器為CSS代碼的位置。加入CSS的方法有四種：
行內(nèi)樣式：<div style="color:red;">
嵌入式：<style type="text/css">p{color:red;)</style>
外部鏈接式：<link href="sty.css" rel="stylesheet" type="text/css" />
導(dǎo)入式：<style type="text/css">@import url("sty2.css");</style>
在前三級優(yōu)先級均相同的情況下，它們的位置哪個靠下，哪個優(yōu)先級高。由于行內(nèi)樣式在第三級優(yōu)先級最高，所以不可能出現(xiàn)行內(nèi)樣式和其它樣式進(jìn)入第四級pk的情況，因此在第四級的比較中是進(jìn)行嵌入式，外部鏈接式，導(dǎo)入式的位置比較。先將外部鏈接式和導(dǎo)入式的代碼排列在文檔內(nèi)，然后就可以比較單條語句的順序了。
注意：1、語句可以位于頁面的任何位置，總是靠下的優(yōu)先
2、對于一個<style>標(biāo)簽，要么寫入嵌入樣式，要么寫入導(dǎo)入樣式。
下面給出一些實例來描述以上四個優(yōu)先級之間的關(guān)系
第一和第二的比較
<style type="text/css">
#a{color:blue!important;}
#b{color:red;}
</style>
<body>
<div id="out"><div id="a"><p id="b">文字</p></div></div>
b離修飾內(nèi)容更近，雖然a有!important，還是不能覆蓋，顯示紅色
第二和第三的比較
<style type="text/css">
#a{color:blue!important;}
div #a{color:red;}
</style>
<body>
<div id="out"><div id="a"><p id="b">文字</p></div></div>
div #a中有一個標(biāo)簽選擇，一個id選擇；a中只有一個id選擇，但由于使用了!important所以優(yōu)先級變高，顯示藍(lán)色。
第一和第三的比較
<style type="text/css">
#b{color:blue;}
#out #a{color:red;}
</style>
<body>
<div id="out"><div id="a"><p id="b">文字</p></div></div>
雖然下面的id選擇符更多，但是b離內(nèi)容更近，所以是藍(lán)色
第一和第三的比較-行內(nèi)樣式的優(yōu)先級問題
<style type="text/css">
.c3{color:blue;}
</style>
<body>
<div style="color:red;" id="a" class="c2" ><p id="b" class="c3">文字</p></div>
在外層div使用了行內(nèi)樣式，但CSS選擇器選擇的是更靠近內(nèi)容的class，所以是藍(lán)色。如果選擇器選擇.c2，類選擇優(yōu)先級不如行內(nèi)選擇，就顯示為紅色
附加內(nèi)容：內(nèi)嵌代碼修飾的位置
<style type="text/css">
#b{color:blue;}
</style>
<body>
<div id="out"><div id="a"><font color="red"><p id="b">文字</p></font></div></div>
這里雖然有行內(nèi)樣式，但其修飾位置比b更加靠外，所以是藍(lán)色
font修飾的到底是哪個呢？font其實也可以看做一個標(biāo)簽
<style type="text/css">
font{color:blue;}
</style>
<body>
<div id="out"><div id="a"><font color="red"><p id="b">文字</p></font></div></div>
這時候顯示為藍(lán)色。而選擇#a的時候就會顯示紅色了。選擇#b的時候則顯然是藍(lán)色。這說明內(nèi)嵌標(biāo)簽的修飾位置在它兩端的標(biāo)簽之間，而內(nèi)嵌標(biāo)簽的修飾詞匯的優(yōu)先級比標(biāo)簽選擇（參考第三級優(yōu)先）更弱。
新聞熱點
疑難解答
