你對CSS規(guī)則的執(zhí)行順序是否了解，這里和大家分享一下，若兩條規(guī)則具有相同的權(quán)值、起源及特殊性，那在樣式表中最后出現(xiàn)的規(guī)則優(yōu)先。

CSS規(guī)則的執(zhí)行順序

1、CSS規(guī)則之特殊性

首先來看一下這個例子將會發(fā)生的情形：

程序代碼

.grape{color:Blue;}H1{color:Red;}  
<h1classh1class="grape"> 
Meerkat  
<em>Central  
</em> 
</h1> 
 

H1和.grape都匹配上面的H1元素，那么到底應(yīng)該使用哪一個呢？實(shí)踐證明.grape是正確答案，把句子顯示為藍(lán)色。根據(jù)規(guī)范，一般的HTML元素選擇符(H1,P等)具有特殊性：

1，類選擇符具有特殊性10，ID選擇符具有特殊性100，值越大權(quán)重就越大，就優(yōu)先選用。

程序代碼

H1{color:Red;}/*特殊性=1*/PEM{color:Blue;}  
 
/*特殊性=2*/.grape{color:Fuchsia;}  
 
/*特殊性=10*/P.bright{color:Yellow;}  
 
/*特殊性=11*/P.brightEM.dark{color:Gray;}  
 
/*特殊性=12*/#ID01{color:Red;}  
 
/*特殊性=100*/  
 

2、CSS規(guī)則之繼承

在特殊性的框架下，被繼承的值具有特殊性0，也就是說任何顯式聲明的規(guī)則將會覆蓋其繼承樣式，即便這條規(guī)則具有多高的權(quán)重。

程序代碼

H1#ID01{color:Red;}  
 
/*特殊性=101*/EM{color:Gray;}  
 
/*特殊性=1*/<H1IDH1ID="ID01> 
 
Meerkat<EM> 
 
<Central</EM> 
 
</H1> 

雖然ID選擇符特殊性最高，但由于在特殊性的框架下，繼承值只有特殊性0，因些Central會顯示為Gray顏色。

3、CSS規(guī)則之STYLE元素

還有sytle元素在CSS下權(quán)值定義為100，盡管ID選擇也一樣，實(shí)際上style元素比ID具有更高的特殊性。

程序代碼

#ID01EM{color:Gray;}  
 
<H1IDH1ID="ID01">Meerkat  
 
<EMstyleEMstyle="color:red;"> 
 
Central</EM> 
 
!</H1> 

會顯示為red顏色。

4、CSS規(guī)則之重要性(!important)

!important具最高特特性比如說1000，因此!important規(guī)則會覆蓋內(nèi)聯(lián)STYLE屬性的內(nèi)容。程序代碼
H1{color:red!important;}<H1style="color:black;">MeerkatCentral!</H1>

將顯示為RED顏色。一種特殊情形

程序代碼

P#warn{color:Red!important;}EM{color:Black;}  
 
<pidpid="warn">Thistextisred,but<em> 
 
emphasizedtextisblack.</em> 
 
</p> 

雖然定義!important最高特殊性，但句子并沒有全部顯示為RED紅色，為什么呢？也許我們得回頭看看前面的規(guī)則，在前面的第二點(diǎn)繼承中提“在特殊性的框架下，繼承值只有特殊性0。”因此即便定義!important，繼承里的特殊性也只有0，所以顯示為特殊性為1的EM規(guī)則。權(quán)重順序?yàn)椋豪^承=>HTML普通選擇符=>類選擇符=>style元素=>!important

5、CSS規(guī)則之層疊

1)若兩條規(guī)則具有相同的權(quán)值、起源及特殊性，那在樣式表中最后出現(xiàn)的規(guī)則優(yōu)先。

2)任何位于文檔中的規(guī)則都比引入的規(guī)則優(yōu)先。

【編輯推薦】

1. CSS Sprites工作原理及優(yōu)缺點(diǎn)
2. CSS層疊與繼承用法手冊
3. DIV布局規(guī)范中CSS類及id命名方式
4. CSS網(wǎng)頁布局中id與class命名規(guī)則
5. 將XHTML+CSS頁面轉(zhuǎn)換為打印機(jī)頁面技巧