当项目越来越复杂,在同一元素上使用的css样式越来越多,很多小伙伴们会发现,有些样式居然不显示了。
其实,CSS有优先级这一个概念,会渲染优先级较高的样式。
这里会涉及到一个选择器权重的问题。
打个比方:
id选择器权重最高 +100
类、伪类选择器 +10
元素或伪元素选择器 +1
其它选择器 + 0
那选择器的权重计算方法是怎么样的?
下面看一个例子:
#id .link a[href="xxx"] #id .link.active
#id +100 #id +100
.link +10 .link +10
a[href="xxx"] +0 .active +10
权重 110 权重 120
所以由上结果可见,右边的优先级要高一些。
只要有一个id选择器,百位就进1,其它选择器也是如此,但是不会进位。
也就是说,如果有11个类选择器,它们的优先级也不会比一个id选择器高,因为,类选择器权重的累加只会在十位上,永远进不
到百位上。
除了以上选择器自身的权重还有以下一些,如:
!important 最高
行内样式 也就是style属性内写样式 优先级其次
相同权重,后写的生效
也就是说所有情况下,所有的优先级由高到低可按下面排列:
!important 最高
行内样式
id选择器
类or伪类选择器
元素or伪元素选择器
其它选择器
如果有相同的权重,后写的优先级高