css选择器优先级

比如有这样一段HTML代码：

<div id='blakeFez'>blakeFez</div>
<style> 
    div{color:red;} 
    #blakeFez{color:green;}
</style>

那么这时候，上面的blakeFez会显示上面颜色呢？这里就要考虑到css选择器的优先级。css选择器的优先级是由重要性、特殊性、叠层这三个因素决定的。

①、重要性

什么是重要性呢？就是看css值后面有没有加上 !important。如果有加上，就说明具有重要性，如果没有，则不具有。重要性在这三个因素中起到最大的作用。有重要性的css样式，优先级最高。比如这样的代码：

<div id='blakeFez'>blakeFez</div>
<style> 
    div{color:red !important;} 
    #blakeFez{color:green;}
</style>

那么blakeFez这个字符串就会显示为红色。

如果css选择器都具有重要性，或者都不具有重要性，那么就看谁的特殊性大，特殊性大的选择器优先级高。

②、特殊性

选择器的特殊性由四位数组成，即： 0,0,0,0。这四位数的值是通过计算而得来的。计算的规则如下：

内联样式加：1,0,0,0 //比如：<div style="color:red;">red</div>
id选择器加：0,1,0,0 //比如：#id2{color:green;}
类、属性、伪类加：0,0,1,0 
元素、伪元素加：0,0,0,1
通配选择器加：0,0,0,0
继承而来的加无

比如有如下代码：

<div class="divtest">
    <span id="spantest">
        <em data-em=1 id="emtest">blakefez</em>
    </span>
</div>
<style>
    em#emtest{color:red;}  /*选择器a*/
    #spantest #emtest{color:green;}  /*选择器b*/
    div span em{color:gray}  /*选择器c*/
    .divtest span [data-em=1]{color:blue}  /*选择器d*/
</style>

我们来算一下各选择器的特殊性。

选择器a：

由一个元素选择器和一个id选择器组成，所以它的特殊性为 0,1,0,1

选择器b：

由两个id选择器组成，所以它的特殊性为 0,2,0,0

选择器c：

由三个元素选择器组成，所以它的特殊性为 0,0,0,3

选择器d：

由一个类选择器、一个属性选择器和一个元素选择器组成，所以它的特殊性为 0,0,2,1

综上所述，选择器b的特殊性最高，所以，blakeFez字符串最终显示为绿色。

如果两个选择器的重要性跟特殊性都一样的，这时候就用叠层来决定。叠层的含义其实很简单，就是后出现在文档流中的选择器的样式会覆盖先出现选择器的样式。