什么是选择器优先级？
什么是选择器优先级？先来看看MDN对优先级的定义：
浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
光看文字比较难理解，这边举个例子
<div id="green" class="red">
这是一段文字
</div>
#green {
color:green;
}
.red {
color:red;
}
那么这段文字最终显示什么颜色呢？答案是：绿色。至于为什么显示绿色呢？这就涉及到选择器优先级的计算规则了。
优先级的计算规则
一个选择器的特殊性是根据下列（规则）计算的：
- 如果声明来自一个'style'属性而不是一条选择器样式规则，算1，否则就是0 (= a)（HTMl中，一个元素的"style"属性值是样式表规则，这些属性没有选择器，所以a=1，b=0，c=0，d=0）
- 计算选择器中ID属性的数量 (= b)
- 计算选择器中其它属性和伪类的数量 (= c)
- 计算选择器中元素名和伪元素的数量 (= d)
特殊性只根据选择器的形式来定。特殊的，一个"[id=p33]"形式的选择器被算作一个属性选择器(a=0, b=0, c=1, d=0)，即使id属性在源文档的DTD中被定义为"ID"
4个数连起来a-b-c-d（在一个基数很大的数字系统中（in a number system with a large base））表示特殊性
一些示例：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
OK， 现在已经弄清楚了优先级是怎么算的了。但是，还有一个问题，怎么比较两个优先级的高低呢？ 比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
上面的示例中，P元素的颜色将是绿色，"style"属性中的声明将重写STYLE元素中的，而style的优先级是{1,0,0,0}，#x97z的优先级是{0,1,0,0},从左往右比较style的第一位是1，而#x97z的第一位 是0，所以{1,0,0,0}>{0,1,0,0}，即style>#x97z，所以显示绿色。
优先级的特殊情况
上面的规则得出内联样式的优先级是最高的，但是还有比它更高的，那就是 !important，但是建议少用!important。
总结
- 选择器越具体，其优先级越高；
- 相同优先级，出现在后面的，覆盖前面的；
- 属性后面加 !important 的优先级最高，但是要少用；
