CSS中的“规则”：是由选择器及其后面紧跟的样式声明代码块组成。而每一条样式声明，则是由半角冒号“：”将属性名与属性值连接起来，末尾添加半角分号“;”。
p{color:red;}
通常情况下，谈到CSS都会提到层叠性与继承性等特性。本文只讨论CSS的层叠性。
层叠性是指有多个选择器或一个选择器中的多条样式作用于同一元素，即样式的作用范围发生了重叠。
那么，CSS会怎样处理？CSS在处理样式层叠性时，主要按规则是否有冲突来分别对待。
1.规则无冲突
不妨以我们通常遇到的事情为例，来分析到底“什么是规则无冲突”。规则无冲突，实际上是规则中定义的样式无冲突。
规则1：学校规定“上午8:00开始第一节课”；
规则2：李老师通知 “晚上22:00前必须提交作业”。
规则1对全校学生起作用，而规则2对李老师班上的学生起作用。由于规则1与规则2没有任何冲突，李老师班上的学生必须遵守两条规则：做到“上午8:00开始第一节课”且“晚上22:00前必须提交作业”。
在CSS中，如果多个选择器定义的样式不发生冲突，则元素将应用所有选中该元素的选择器中定义的样式。
示例：
解释：
左侧代码中，网页中的元素p被标记选择器p与类别选择器para选中，由于这两个选择器中定义的样式没有冲突，所以两条规则中的所有样式都应用到了元素p上。网页中元素div的显示效果，其原理与元素p一样。
2.规则有冲突
(1).同一级别
在同一级别选择器中定义了两条相冲突的样式声明，则以CSS代码中最后出现的那条样式为准。这句话非常容易理解。
比如：学校昨天通知“7月2日全校开始放暑假！”；今天又发通知“7月12日全校开始放暑假！”。
毫无疑问，肯定以后一个通知为准啊。不信的话，你按前面的通知离校放暑假试试，看你下学期开学有多少要补考或重修的！
示例：
解释：
左侧代码中，元素p的属性class的值为“plant egg”，其实是元素被egg与plant这两个类选择器选中。但由于CSS代码的最后一条样式是类选择器plant中的“color:red;”，所以元素p的文字颜色为红色。
特别地，若同一个选择器（即同一规则）中有两条相冲突的样式声明，则以CSS代码中最后出现的那条样式为准。
示例：
解释：
左侧代码中，标记选择器p中定义的两条样式有冲突，但最后出现的是“color: blue;”，所以元素p的文字颜色为蓝色。
(2).不同级别
如果多个不同级别的基本选择器定义的样式发生了冲突，则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式。
确定CSS优先级的总原则是：样式越特殊，优先级越高。CSS规定基本选择器的优先级从高到低为：!important >行内样式> ID样式>类别样式>标记样式。
因为复合选择器的优先级高低比较牵涉到选择器的特异性（Specificity）计算，所以下面示例中的选择器都是基本选择器，并不包括复合选择器。
- 类别样式>标记样式
示例：
解释：
左侧代码中，类选择器para定义的样式优先级高于标记选择器p定义的样式，所以网页元素p的文字颜色为蓝色。
- ID样式>类别样式
示例：
解释：
左侧代码中，ID选择器egg定义的样式优先级高于类别选择器para定义的样式，所以网页中元素p的文字颜色为红色。
- 行内样式> ID样式
示例：
解释：
左侧代码中，由于网页中第一个元素p的行内样式（style = "color: blue;"）优先级高于类别选择器egg定义的样式，所以其文字颜色为蓝色；而第二个元素p的行内样式（style = "color: green;"）优先级高于ID选择器loof定义的样式，所以其文字颜色为绿色。
- !important >行内样式
在CSS中，通过对某一样式声明! important，可以强制更改默认的CSS样式优先级，使该条样式声明具有最高优先级。也就是说，有!important的样式声明相当于在有冲突的样式中写在最后面的那一条，这条样式会覆盖页面内任何位置定义的与其有冲突的样式。
如果觉得不好理解的话，那就想想在银行取号办理业务时遇到的情况：“有人比你先到银行，在你之前取号，所以先办理业务；如果另一个人比你后到银行，在你之后取号，居然发现他也是比你先办理业务！”第一种情况，能接受，也能理解。但第二种情况，受不鸟吧，肯定会吼吼，即使是在心里边。
为什么呢？因为人家是VIP哦，额头上有“Important”，只是你没有看出来而已。如果还无法理解，那我也只能对你那什么商表示无法理解了。
示例：
解释：
左侧代码中，标记选择器p定义的样式（“color: red !important;”）的优先级高于行内样式(style="color:blue;")。之前示例说明在基本选择器中定义的样式没有行内样式的级别高，而从这个示例看出：有！important作后盾的样式级别最高！
特别提醒：!important，并不是所有浏览器都认哦！一旦不认识，那就像明星上街没有被认出来一样尴尬，很让人受挫的。因此，不建议大家使用!important来强制改变选择器中样式的优先级。
层叠最终样式呈现规则总结:
权重比较
所谓权重，就是优先级的一种计算方式。
权重有一个值：id的权重100，类的权重10，元素的权重为1
还有一个注意点：（同一级别）权重是可以累加计算
因为上面的.test .test2的权重为20，而下面的.test的权重只有10，所以，最终是蓝色
权重的计算还有一个就近原则
效果：最终呈现为蓝色，因为上面得样式压根儿就没有选中p
案例二：
效果：
