你對CSS規則的執行順序是否了解，這里和大家分享一下，若兩條規則具有相同的權值、起源及特殊性，那在樣式表中最后出現的規則優先。

CSS規則的執行順序

1、CSS規則之特殊性

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

程序代碼

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

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

1，類選擇符具有特殊性10，ID選擇符具有特殊性100，值越大權重就越大，就優先選用。

程序代碼

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規則之繼承

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

程序代碼

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

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

3、CSS規則之STYLE元素

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

程序代碼

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

會顯示為red顏色。

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

!important具最高特特性比如說1000，因此!important規則會覆蓋內聯STYLE屬性的內容。程序代碼
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紅色，為什么呢？也許我們得回頭看看前面的規則，在前面的第二點繼承中提“在特殊性的框架下，繼承值只有特殊性0。”因此即便定義!important，繼承里的特殊性也只有0，所以顯示為特殊性為1的EM規則。權重順序為：繼承=>HTML普通選擇符=>類選擇符=>style元素=>!important

5、CSS規則之層疊

1)若兩條規則具有相同的權值、起源及特殊性，那在樣式表中最后出現的規則優先。

2)任何位于文檔中的規則都比引入的規則優先。

【編輯推薦】

1. CSS Sprites工作原理及優缺點
2. CSS層疊與繼承用法手冊
3. DIV布局規范中CSS類及id命名方式
4. CSS網頁布局中id與class命名規則
5. 將XHTML+CSS頁面轉換為打印機頁面技巧