CSS样式表的作用顺序,覆盖顺序
本文主要参考了MdN Design Interactive的关于CSS适用顺序文章1。如果不注意CSS的作用顺序和覆盖顺序的话,就会遇到”怎么回事,明明设置了,却不起作用“的困扰。
目录
覆盖顺序:后面覆盖前面的
设定对象和项目相同的时候,后面设置的内容会覆盖前面设置的内容。
CSS加载的时候,对于相同作用对象,对于不同项目的设置会补充,对于相同项目的设置,后面的设置内容会覆盖前面的设置内容。
但是,即使是相同项目的设置,根据优先顺序的不同,可能有前面的设置覆盖后面设置的情况。具体参考下面的小节的记述。
<style type="text/css">
p {color:red;} /*Tag指定*/
...
P {color:purple;} /*Tag再次指定。这里会覆盖前面的设置*/
</style>
<p >这里会是紫色</p>
优先顺序是:!important指定>ID指定>Class指定>HTML Tag指定
对于样式指定来讲,指定得越是具体,优先度就越高。优先顺序 对于同一个项目的设置,顺序是这样的:
!important指定>>ID指定(#ID)>>Class指定(.ClassName)>>Tag指定
优先顺序可以用分数的方式来表示。分数参加下表:
CSS对象类型 | 优先度分值(分值越高作用优先顺序越高) |
---|---|
!important指定 | 200 |
ID指定 | 100 |
Class指定 | 10 |
Tag指定 | 1 |
如果加上通配符 *(可以省略)的话,优先度分值列表如下
CSS对象类型 | 优先度分值(分值越高作用优先顺序越高) |
---|---|
!important指定 | 200 |
ID指定 | 100 |
Class指定 | 10 |
特定Tag指定 | 2 |
通配符指定(*) | 1 |
下面是简单的例子。
<style type="text/css">
<!--
#blueId {color:blue;}
.yellowClass {color:yellow;}
p {color:red;}
* {color:pink; line-height:1.5;}
h1.yellowClass {color:purple}
-->
</style>
<p>这是是红色</p>
<p class="yellowClass">这里是黄色</p>
<p class="yellowClass" id="blueId">这里是蓝色</p>
<h2 >这里是粉色 </h2>
<h1 class="yellowClass" > 这里是紫色</h1>