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>

---