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.