CSS权重的整理

一、CSS权重从高到低依次是：

    引入样式 ：   ！important ------>  行间样式   ------>   内嵌式   ----->   链入式

     选择器   ：     id选择器 ------>  class选择器   ------->   标签选择  ------->  通配符

二、接下来上代码测试一下上边讲的是否正确

（1）标签选择  vs  通配符

        结果：显示了标签定义的样式----下面贴代码看结果

<div id="test" class="test">
权重比较
</div>

*{
	color:#0F0; /*文字是绿色*/
	font-weight:bolder;
	}
div{
	color:#60F; /*文字是蓝色*/
	font-weight:bolder;
	}	 

运行截图：

（2）class选择器  vs  标签选择

        结果：显示class选择器定义的样式

.test{
	color:#0F0; /*文字是绿色*/
	font-weight:bolder;
	}
div{
	color:#60F; /*文字是蓝色*/
	font-weight:bolder;
	}	

运行截图：

（3）class 选择器  vs  id选择器

        结果：显示id选择器定义的样式

.test{
	color:#0F0; /*文字是绿色*/
	font-weight:bolder;
	}
#test{
	color:#60F; /*文字是蓝色*/
	font-weight:bolder;
	}	

运行截图：

（4）内嵌式的id   vs    链入式的id，内嵌式在下

        结果：使用了内嵌式id的样式

<style>
#test{
	color:#0F0; /*文字是绿色*/
	font-weight:bolder;	
}
</style>

#test{
	color:#60F; /*文字是蓝色*/
	font-weight:bolder;
	}	

运行截图：

（5）内嵌式的id   vs    链入式的id，外链式在下

<style>
#test{
	color:#0F0; /*文字是绿色*/
	font-weight:bolder;	
}
</style>
<link href="Demo02.css" type="text/css" rel="stylesheet"/>

#test{
	color:#60F; /*文字是蓝色*/
	font-weight:bolder;
	}	

运行截图：

由此：可以看出，内嵌式和链入式两者的权重一样，哪个在下边，使用哪个的样式，并不是说，在下边的权重就高，不是的啊。是因为在下边的覆盖了上边设置的样式，所以显示下边定义的样式。

（6）行间样式    vs    内嵌式

        结果：这个还用看吗，肯定显示行间的样式啊。

<style>
#test{
	color:#0F0; /*文字是绿色*/
	font-weight:bolder;	
}
</style>

<div id="test" class="test" style="color:#f40" ><!--f40淘宝红-->
    权重比较
    </div>

运行截图：

（7）!imporant     vs      行间样式

        结果：显示有!important的样式

<style>
#test{
	color:#0F0 !important; /*文字是绿色*/
	font-weight:bolder;	
	
}
</style>

<div id="test" class="test" style="color:#f40" ><!--f40淘宝红-->
    权重比较
    </div>

运行截图：

在CSS中定义了一个！imporant 命令，该命令被赋予最大优先级，也就是说，不管权重如何及样式位置的远近，！imporant命令都具有最大优先级。

听成哥说的一个知识点：这个权重的1000和100，不是1000、100。这个是有进制的数，不是十进制，是256进制。