css优先级

发表于 | 分类于

我们都知道：ID选择器的优先级>class选择器的优先级>元素选择器的优先级

行间样式的优先级比ID选择器优先级高,行间样式的特殊性是1,0,0,0。
ID选择器的特殊性值，加0,1,0,0。
类选择器、属性选择器或伪类，加0,0,1,0。
元素和伪元素，加0,0,0,1。
通配选择器*对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

下面是容易混淆的地方：
1.css样式优先级还和继承有关，继承的优先级不如本身应用的优先级高。
子级的选择器优先级比父级的选择器优先级高，或者说继承的优先级程度比自身的优先级低！

1
2
3
<div class="red">
  <p>p</p>
</div>

1
2
3
4
5
6
.red{
	color:red;
}
p{
	color:yellow;
}

结果：段落p的颜色为黄色。

2.前面有讲到通配选择器*的特殊性值是0,0,0,0，而元素通过父元素继承过来的样式是没有特殊性值的，所以，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。

1
2
3
<div>
  <p>我是红色</p>
</div>

1
2
3
4
5
6
*{
	color: red;
}
div{
	color: yellow;
}

结果：段落p的颜色为红色。

3.css规则会按顺序排序，后声明的规则优先级高。