比如有这样一段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字符串最终显示为绿色。
如果两个选择器的重要性跟特殊性都一样的,这时候就用叠层来决定。叠层的含义其实很简单,就是后出现在文档流中的选择器的样式会覆盖先出现选择器的样式。