CSS 權重計算

CSS 的權重是一個重要觀念,初學者常常遇到新增了 CSS 去改變某個元件的樣式表,但卻沒有作用,很可能是所設定的樣式表被其他權重高的樣式表所覆蓋,以下說明一些權重的計算方式

Style sheets 來源有三種
- user agent – 瀏覽器預設樣式, ex: 在 IE 中 float 屬性(property)在瀏覽器預設值是 none, 可參考 http://msdn.microsoft.com/en-us/library/ie/ms530751(v=vs.85).aspx
- author – 開發人員定義的樣式, 即網頁撰寫人員在網頁上所定義的樣式表
- user – 用戶在瀏覽器中定義的 CSS,不同的瀏覽器有不同的設定方式, 以 IE8 為例, 在工具 / 網際網路選項可自定樣式表
重要性(importance)規則
- normal
- important 在CSS規則後添加 !important 權重提高
若沒有使用 important 就屬於 normal, important 就好比是古代的尚方寶劍,使用它可讓權重加到最大

example:
```
<html>
<head>
<style>
#myid { color: green; }
.myclass { color: gold; }
p { color: blue !important; }
</style>
</head>
<body>
<p id="myid" class="myclass" style="color: red">important</p>
</body>
</html>
```
output:

important

階層順序(Cascading order),由低至高排列,越底下權重越高,因此會覆蓋上面所定義的樣式
- user agent declarations
- user normal declarations
- author normal declarations
- author important declarations
- user important declarations
CSS 選擇器權重計算方式 (Calculating a selector's specificity)
- 第一級 inline > ID > class > element
  ID 和 class 功能看起來似乎有點相同,在一般狀況下 ID 是唯一不可重覆的,而Class是可被拿來被重覆使用
  
  example:
```
<html>
<head>
<style>
#myid { color: green; }
.myclass { color: gold; }
p { color: blue; }
</style>
</head>
<body>
<p id="myid" class="myclass" style="color: red">inline > ID > class > element</p>
<p class="myclass">class > element</p>
</body>
</html>
```
  output:
  
  inline > ID > class > element
  
  class > element
- 第二級詳細度高,權重越高(若第一級權重相同,才需比較第二級)
  example:
```
<html>
<head>
<style>
p.myclass { color: blue; }
.myclass { color: red; }
</style>
</head>
<body>
<p class="myclass">h1.myclass > .myclass</p>
</body>
</html>
```
  output:
  
  h1.myclass > .myclass
- 第三級若前兩級權重相同,依照CSS在文件中定義的順序,後定義的樣式會覆蓋前面定義的樣式
```
<html>
<head>
<style>
p.myclass { color: blue; }
body .myclass { color: red; }
.myclass2 { color: yellow; }
.myclass1 { color: green; }
</style>
</head>
<body>
<p class="myclass">後蓋前</p>
<p class="myclass1 myclass2">double class 後蓋前</p>
</body>
</html>
```
  output:
  
  後蓋前
  
  double class 後蓋前
  *注意, p.myclass & body .myclass 有無使用空格作用是不同的
權重計算式

W3C 建議的權重計算方式 http://www.w3.org/TR/CSS21/cascade.html#specificity

將 inline, ID, class, element 轉成 a, b, c, d 的方式做比較, 若使用一個 inline 的 style 則 a = 1, 若使用兩個 class 的 style 則 c = 2, 以此類推, a 的權重最大, 因此 a 的數字大則優先權高, 若 a 相同則繼續比較 b 的數字, 以此類推, 假使 abcd 全都相同,則後定義的樣式優先

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

CSS 權重計算

權重計算式

0 comments:

Post a Comment