2012
Mar
03

CSS Style 層級

Tags:
簡中版

在寫 CSS 語法，常常一層又一層的覆蓋掉先前的 style ， 平常都不會發生什麼事情，不過夜路走多了，總是會遇到鬼，你是曾也發生過 CSS Style 被無故蓋掉的情形，雖然我們會用 !import 這個力式無敵解掉所有的問題，不過這招用多了，以後會有更嚴重的問題發覺，這篇文章將會說明 CSS Level 的不同，一般來說 CSS 可以使用 ID 、Class、Tag、等三種方式來設定 style (樣式)。

直接破題，CSS 權重的規則如下：

3 層 > 2 層 > 1 層,
ID > Class > Tag

以下是測試 CSS 權重的過程

ID Tag Class 比較

先來比較簡單的 ID、Class、Tag 這三個的 overwrite 情形，下面的範例中，分別設定 tag code 為 紅色， class1 為藍色，id1 為綠色，結果是 ID > Class > Tag ， 就算 Style 的順序亂排，也不會影響結果。

測試 ID > Class > HTML Tag 
  1. <style>
  2. code{
  3.    color:red;
  4. }
  5. #id1{
  6.    color:green;
  7. }
  8. .class1{
  9.    color:blue;
  10. }
  11. </style>
  12. <code class="class1" id="id1">
  13.  1. ID , class ,tag 三者比較，由 ID 獲勝
  14. </code><br />
  15. <code class="class1" >
  16.  2.class ,tag 二者比較，由 class 獲勝
  17. </code>

預覽

1. ID , class ,tag 三者比較，由 ID 獲勝
2. class ,tag 二者比較，由 class 獲勝

Class+ Class 比較

這裡class+ 的意思是指 .class 後面又多接一個 selector，如 .cls span , .test div ，而我使用 Class 指定樣式，再使用 Class+ 指定一次樣式 ，最後測試的結果是 class+ > class ， ID+ > ID ， Tag+ >Tag。

測試 class + class 原始碼 
  1. <style>
  2. .class3 span{
  3.    color:red;
  4. }
  5.  
  6. .sp2{
  7.    color:green;
  8. }
  9. </style>
  10. <code class="class3" id="id3">
  11.   <span class="sp2">
  12.     1.   class+ > class
  13.   </span>
  14. </code>

預覽結果

1. class+ > class

ID+ Tag+ Class+ 比較

接者我們來比較一下，這三種情況，後面都有接 其他的 selector 時，會有什麼不同?。

看下面的測試結果 ID+ > Class+ > Tag+ 。

測試 ID+ Tag+ Class+ 原始碼 
  1. <style>
  2. .class2 .sp{
  3.    color:red;
  4. }
  5. code .sp{
  6.    color:pink;
  7. }
  8. #id2 .sp{
  9.    color:green;
  10. }
  11. </style>
  12. <code class="class2" id="id2">
  13.   <span class="sp">
  14.       1. ID+ > class+  > tag+
  15.   </span>
  16. </code><br />
  17. <code class="class2">
  18.   <span class="sp">
  19.       1. class+  > tag+
  20.   </span>
  21. </code>

預覽

1. ID+ > class+ > tag+
1. class+ > tag+

同等級的 style

對於兩個一樣 level 的 style ，後者會蓋掉前者的 style 。

測試同等級 style 原始碼 
  1. <style id="style1">
  2.    .spp{
  3.       color:red;
  4.    }
  5.    .spp{
  6.       color:blue;
  7.    }
  8.    
  9. </style>
  10. <span   class="spp">
  11. 測試文字
  12. </span>

預覽

測試文字

CSS Style 層級結論

3 層 > 2 層 > 1 層
ID > Class > Tag

This post was last modified by puritys


回應 (Leave a comment)

類別 CSS

Copyright &copy; 2014 PURITYS.COM. All rights reserved.