您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 關(guān)于CSS的優(yōu)先級(jí)

關(guān)于CSS的優(yōu)先級(jí)

文章來源：365jz.com 點(diǎn)擊數(shù)：308 更新時(shí)間：2009-11-15 17:03 參與評(píng)論

在閱讀《CSS權(quán)威手冊(cè)》時(shí)最迷惑的就是CSS的優(yōu)先級(jí)問題，可能主要是里面表達(dá)方式讓人難以理解吧。

簡(jiǎn)要總結(jié)一下CSS的優(yōu)先級(jí)：

CSS選擇器本身的特殊性值可用4位數(shù)字表示(0,0,0,0)，4組數(shù)字依次代表選擇器中的行內(nèi)（內(nèi)聯(lián)）選擇器,ID,class,元素選擇器，如p .left可表示為0,0,1,1；div p #newsList可表示為0,1,0,2；

其中4組選擇器中第三組除了類屬性值外還包括屬性選擇以及偽類，因此（除了ie6及之前）ul li a[title="tip"]可表示為0,0,1,3。

結(jié)合符及通配選擇器對(duì)特殊性無影響。

CSS的優(yōu)先級(jí)由選擇器的特殊性決定，由左向右逐組比較，特殊性高的選擇器級(jí)別優(yōu)先。也即遵循：行內(nèi)選擇>ID>class>標(biāo)簽

如：

h1{color:red;}/*0,0,0,1*/
body h1{color:green;}/*0,0,0,2*/
h2.titleInfo{color:purple;}/*0,0,1,1*/
div>ul>li a[title="a"] span{color:gray;}/*0,0,1,5*/

ID與屬性選擇器的特殊性

ID選擇器與屬性選擇器存在著歧義的一種情況：

ul #first{color:red;}
ul li[id="first"]{color:green;}

兩者特殊性值分別為0,1,0,1和0,0,1,1，因?yàn)?first優(yōu)先級(jí)較大。

有如下例子：

<style type="text/css">
li{color:gray;}
ul li[id="first"]{color:green;}
ul li #first{color:yellow;}
ul #first{color:red;}
#first{color:blue;}
</style>
</head>

<body>
<ul>
<li id="first">一系列選項(xiàng)</li>
<li>一系列選項(xiàng)</li>
<li>一系列選項(xiàng)</li>
<li>一系列選項(xiàng)</li>
</ul>
</body>

顯示效果如下（ie6,7,8,ff,opera測(cè)試通過）

注意：該css中ul li #first是一種不規(guī)范的選擇方式，因?yàn)閘i與#first是同級(jí)關(guān)系，不能使用后代選擇器。

內(nèi)聯(lián)樣式特殊性

內(nèi)聯(lián)樣式以1開關(guān)，在通用的選擇器它的優(yōu)先級(jí)高于ID選擇器，因此

<li style="color:yellow;">一系列選項(xiàng)</li>

將覆蓋引入式及嵌入式的樣式。

多class樣式的特殊性

頑固的ie6居然支持多class樣式，令我大跌眼睛。形如<div class="left page"></div>在解析時(shí)兩個(gè)class相應(yīng)的樣式都會(huì)同時(shí)起作用，相同的樣式后一個(gè)class的優(yōu)先。

<style type="text/css">
li{color:gray;}
.a{color:red; font-style:italic;}
.b{color:blue;}
</style>
</head>

<body>
<ul>
<li class="a b">一系列選項(xiàng)</li>
</ul>
</body>

效果如下