CSS选择器优先级

当项目越来越复杂，在同一元素上使用的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伪元素选择器

其它选择器

如果有相同的权重，后写的优先级高