对于同一个元素，可以有多个选择器来指定它的颜色，但是最终生效的只有其中一个而已。这篇文章就是为了弄懂CSS优先级的计算规则。
先概括一下，CSS优先级由0,0,0,0这样的特殊值来表示，计算规则是左大右小的，举个例子：1,0,0,0 > 0,99,99,99。特殊值越大，优先级越高。
再概括一下：
- ID选择器的特殊性值，加0,1,0,0。
- 类选择器、属性选择器或伪类，加0,0,1,0。
- 元素和伪元素，加0,0,0,1。
- 通配选择器*对特殊性没有贡献，即0,0,0,0。
- 行间样式，加1,0,0,0。
- 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
注意上面的“加”这个字，特殊值是可以叠加的。
废话不多少，直接上demo，通过demo看一看这些是怎么计算的。
<html>
<head>
<title>
CSS优先级计算规则
</title>
<style>
p {color: red;}/* 元素选择器，特殊值0,0,0,1 */
div P {color: orange;}/* 元素选择器+元素选择器，特殊值0,0,0,2 */
.yellowP {color: yellow;}/* 类选择器，特殊值0,0,1,0 */
div .yellowP {color: green;}/* 元素选择器+类选择器，特殊值0,0,1,1 */
#blue1,#blue2,#blue3 {color: blue;}/* ID选择器，特殊值0,1,0,0 */
.purple {color: purple;}/* 类选择器，特殊值0,0,1,0 */
.red {color: red !important;}/* !important优先级最高 */
</style>
</head>
<body>
<p>这条应该是红色。（对应第7行）</p>
<div>
<p>这条应该是橙色。（对应第8行）</p>
</div>
<p class="yellowP">这条应该是黄色（对应第9行）</p>
<div>
<p class="yellowP">这条应该是绿色（对应第10行）</p>
<P class="yellowP" id="blue1">这条应该是蓝色（对应第11行）</P>
<P class="yellowP" id="blue2" style="color:purple">行间样式，特殊值1,0,0,0,这条应该是紫色</P>
</div>
<p class="yellowP purple">这条应该是紫色,特殊值一样,后来居上（对应第12行）</p>
<p id="blue3" class="red" style="color:purple">这条应该是红色。!important优先级最高（对应第13行）</p>
</body>
</html>看一下执行结果：
通过这个DEMO，可以看到特殊值的计算方法以及特殊值对优先级的影响。当两个规则应用到同一元素时，特殊值越大，优先级越高。如果有!important，那么!important优先级最高。
如果多个规则都有!important，那么会比较这些规则的特殊值，如果特殊值也一样，那么后来者居上，最后生效的规则优先级最高。因此a标签的四种状态：link、:visited、:hover、:active，一般都遵循“爱恨原则LVHA”（LoVe HAte）。
根据css优先级计算规则，伪类的特殊性值是0,0,1,0，4个伪类的特殊性值相同，那么后面声明的规则优先级高。当鼠标滑过a链接时，满足:link和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；同理，当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。