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

<style>
code{
   color:red;
}
#id1{
   color:green;
}
.class1{
   color:blue;
}
</style>
<code class="class1" id="id1">
 1. ID , class ,tag 三者比较，由 ID 获胜
</code><br />
<code class="class1" >
 2.class ,tag 二者比较，由 class 获胜
</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 原始码

<style>
.class3 span{
   color:red;
}
 
.sp2{
   color:green;
}
</style>
<code class="class3" id="id3">
  <span class="sp2">
    1.   class+ > class
  </span>
</code>

预览结果


  
	 1. class+ > class

ID+ Tag+ Class+ 比较

接者我们来比较一下，这三种情况，后面都有接其他的 selector 时，会有什么不同?。

看下面的测试结果 ID+ > Class+ > Tag+ 。

测试 ID+ Tag+ Class+ 原始码

<style>
.class2 .sp{
   color:red;
}
code .sp{
   color:pink;
}
#id2 .sp{
   color:green;
}
</style>
<code class="class2" id="id2">
  <span class="sp">
      1. ID+ > class+  > tag+
  </span>
</code><br />
<code class="class2">
  <span class="sp">
      1. class+  > tag+
  </span>
</code>

预览


  
		1. ID+ > class+  > tag+


  
		1. class+  > tag+

同等级的 style

对於两个一样 level 的 style ，后者会盖掉前者的 style 。

测试同等级 style 原始码

<style id="style1">
   .spp{
      color:red;
   }
   .spp{
      color:blue;
   }
   
</style>
<span   class="spp">
测试文字
</span>

预览

测试文字

CSS Style 层级结论

3 层 > 2 层 > 1 层

ID > Class > Tag

网页好读版

This post was last modified by puritys 2015/12/22

CSS Selector