CSS样式表的作用顺序，覆盖顺序

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>

---