標籤：pre hive lan sky bsp 相同 結果 唯一性 oct
CSS選取器權重值的計算對於Css權重，現在網上很多版本都是這樣計算的：內聯樣式1000點，ID100點，Class、偽類（pseudo-classes）或屬性選取器10點，標籤元素和虛擬元素（pseudo-elements）1點；雖然大多數時候是正確的但因為真正的原理並非如此，所以某些情況下會出錯。
css權重有ABCD四個值，A代表行間樣式，B代表選取器中ID的數量，C代表選取器中類, 偽類, 屬性選取器的數量，D代表標籤元素和虛擬元素的數量。
具體理解請看例子：
顯示樣式時，多組從A到D依次比較，結果不相等則顯示數值較大的；否則，如果A相同，比較B，如果B相同，比較C，如果C相同，比較D，如果D相同，後定義的優先。
錯誤與正確方法計算的示範樣式一：body header div nav ul li div p a span em {color: red}
樣式二：.count {color: blue}
若按照本文開始提到的計算方式，給每個ABCD分配點數，則樣式一的權重值是11，樣式二的權重值是10，如果這兩條規則用於同一個元素，則該元素應該是紅色，實際結果卻是藍色。
按照正確的計算方式：樣式一的權重為（0,0,0,11），樣式二的權重為（0,0,1,0），A、B相同，C組樣式二大於樣式一，所以顯示樣式二的規則。
權重中的大BOSS以上計算均為正常情況，而對於！important來說，其淩駕於所有規則之上。
CSS2規範中規定：!important 用於單獨指定某條樣式中的單個屬性。對於被指定的屬性，有 !important 指定的權重值大於所有未用 !important 指定的規則。
樣式一： #header {color: red; font-weight: bold;}
樣式二： .header {color: blue !important; font-weight: normal;}
在以上樣式中，字型顏色本該是紅色，由於使用了!important所以字型顏色為藍色，而font-weight則按照規定使用樣式一的規則。
如果多條規則中都對同一個屬性指定了 !important，則在指定 !important 規則的這些選取器中，按照CSS權重計算結果進行顯示。
例子：
html代碼
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>demo</title> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> #div1 { width: 100px; height: 100px; background-color: red; color: blue !important; } </style></head><body> <div id="div1" class="div1" style="height: 200px;color: pink;"> <p id="active">hsahuishau</p> <p>hfduihif</p> </div></body></html>
外部樣式表 style.css 代碼
.div1 { width: 300px; height: 300px; background-color: green; color: yellow !important;}
運行結果為：
字型顏色忽略了行間樣式pink，在blue和yellow中按照權重計算結果顯示為blue。
因此 !important 的作用只有在具有唯一性時才能提現，所以使用 !important要謹慎。
CSS多重樣式看了以上CSS優先順序的計算，有些小夥伴可能會認為執行了某一樣式表中的樣式其他樣式將不執行，其實以上覆蓋執行是發生在同一個 HTML 元素被不止一個樣式定義時。對於未被重複定義的樣式將正常執行。
例如，外部樣式表擁有針對 h3 選取器的三個屬性：
h3 {color:red;text-align:left;font-size:8pt;}
而內部樣式表擁有針對 h3 選取器的兩個屬性：
h3 {text-align:right;font-size:20pt;}
最終h3 得到的樣式是：
color:red;text-align:right;font-size:20pt;
即顏色屬性將被繼承於外部樣式表，而文字流向（text-alignment）和字型尺寸（font-size）會被內部樣式表中的規則取代。
參考資料：http://www.cnblogs.com/mizzle/archive/2012/12/06/2804378.html
http://www.cnblogs.com/xuyongsky1234/p/4157575.html
http://www.runoob.com/css/css-howto.html
轉載請註明出處：絲瓜 ? CSS優先順序詳解（權重詳解）
CSS優先順序詳解（權重詳解）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
