2012
Mar
03

网页好读版


在写 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. </style>
  9. <span class="spp">
  10. 测试文字
  11. </span>

预览

测试文字

CSS Style 层级结论

3 层 > 2 层 > 1 层
ID > Class > Tag

网页好读版