今天在看一本書時又看到了”CSS優 先權“這個問題，感覺這個問題還是比較重要的，也算是樣式的特異性吧，尤其是在面對較多、較深層、較復雜的樣式屬性時，理解CSS的加權計算方法對於重寫 樣式屬性之類的問題都會迎刃而解。那么接下來我就把CSS的執行順序及其優先權問題做一個小小的總結吧。
1、CSS的執行順序
在說CSS的執行順序之前首先讓我們看一下CSS的幾種使用方式：
·外聯樣式表
通過語句
<link rel="stylesheet" type="text/css" href="xxx.css"/>
導入CSS樣式文件
·內聯樣式表
直接在<head></head>里面寫入
<style type="text/css"> ...
選擇器{ ... 屬性:值; ... } ... </style>
內嵌樣式表
直接在HTML里面寫入CSS樣式(雖然不提倡這么做，但在這里為了說明問題還是要提一下)，如：
<p class="test" style="width:200px;height:100px;font-size:12px;color:#0066cc;"> BeyondWeb.cn-記錄與分享前端開發的點點滴滴 </p>
對於執行順序很好理解，在html頁面載入時元素是從上向下依次加載的，當然在css樣式表里css代碼也是從上向下、從左到右執行的，對於同樣的 選擇器，后定義的樣式會把先定義的樣式覆蓋掉（注意：這里說的是同樣的選擇器，如：先定義.test{color:red;}后定 義.test{color:yellow;}，兩個選擇器都是類選擇器”.test“）。
我們來看個小例子：
HTML代碼：
<p class="test"> BeyondWeb.cn-記錄與分享前端開發的點點滴滴 </p>
CSS代碼：
.test{ color:red; }
這時文字是紅色的，那么我們如果在我們的樣式表里后面的代碼里有對.test進行了顏色控制，如：
... .test{ color:red; } ... .test{ color:yellow; } ...
此時文字就變成黃色了，原因就是下面定義的屬性把上面的覆蓋了。
另外對於外聯樣式表、內聯樣式表、內嵌樣式表就看它們在html頁面中的位置了，對於相同選擇器控制的相同屬性，哪一個樣式表里面的屬性最后執行就取哪里面的樣式。
2、CSS的優先權
CSS2.1規范中定義了樣式規則的計算方式，使用一個4位數字串來表示權重，每個選擇器的權重決定了使用哪種樣式，使用的規則有如下幾種：
·元素的內聯樣式屬性，加1,0,0,0
·每個id選擇器，加0,1,0,0
·每個class選擇器、屬性選擇器及偽類，加0,0,1,0
·每個元素及偽元素（如：firstchild）,加0,0,0,1
·提高權限，使用!important
然后，逐位數字相加，得到最終的數字串，按照從左到右的順序逐位比較，一旦對應數字位比較出大小，那么誰大采用誰的規則，如下面幾個demo：
Demo1:
規則1
.test h2{ color:red;//規則1 }
一個class選擇器（取0010），一個html元素（取0001），相加得0011
規則2
h2{ color:red;//規則2 }
一個class選擇器（取0001），最后還是0001通過兩個樣式的最終數字串比較得出結果：取樣式1的規則
Demo2:
樣式1
li.currentMenu { color:#333; }
一個html元素（取0001），一個class選擇器（取0010），相加得0011
樣式2
ul li{ color:#666; }
兩個html元素（兩個0001），相加得0002
通過兩個樣式的最終數字串比較得出結果：取樣式1的規則。雖然有2>1，但它在從左到右第四位，在第三位比較時已經有1>0，所以無論后面的位數誰大誰小都視為無效。
對於!important，語法如下：
屬性：值1 [值2,..值n] !important;
比如：
<p class="test"> BeyondWeb.cn-記錄與分享前端開發的點點滴滴 </p>
... .test{ color:red !important;//語句1 } ... .test{ color:yellow;//語句2 } ...
最終字體的樣式為紅色red，因為!important提高了語句1的權限。
好了，以上就是我對於CSS執行順序及其優先權的理解，就總結這么多吧。