CSS規則的執行順序

1、特殊性首先來看一下這個例子將會發生的情形：程式**

.grape h1

h1和.grape都匹配上面的h1元素，那麼到底應該使用哪乙個呢？實踐證明.grape是正確答案，把句子顯示為藍色。

根據規範，一般的html元素選擇符(h1,p 等)具有特殊性1，類選擇符具有特殊性10，id選擇符具有特殊性100，值越大權重就越大，就優先選用。程式**

h1 /* 特殊性 = 1 */ p em /* 特殊性 = 2 */ .grape /* 特殊性 = 1 0 */ p.bright /* 特殊性 = 11 */ p.bright em.dark /* 特殊性 = 12 */ #id01 /* 特殊性 = 100 */

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

h1#id01 /* 特殊性 = 101 */ em /* 特殊性 = 1 */

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

3、style元素還有sytle元素在css下權值定義為100，儘管id選擇也一樣，實際上style元素比id具有更高的特殊性。程式**

#id01 em

會顯示為red顏色。

4、重要性(!important) !important具最高特特性比如說1000，因此!important規則會覆蓋內聯style屬性的內容。程式**

將顯示為red顏色。一種特殊情形程式**

p#warn em this text is red, but emphasized text is black.

雖然定義!important最高特殊性，但句子並沒有全部顯示為red紅色，為什麼呢？也許我們得回頭看看前面的規則，在前面的第二點繼承中提「在特殊性的框架下，繼承值只有特殊性0。」因此即便定義!important，繼承裡的特殊性也只有0，所以顯示為特殊性為1的em規則。

權重順序為：繼承 => html普通選擇符 => 類選擇符 =>style元素 => !important

5、層疊 1) 若兩條規則具有相同的權值、起源及特殊性，那在樣式表中最後出現的規則優先。 2) 任何位於文件中的規則都比引入的規則優先。