谈谈CSS选择器权值问题

CSS引擎内部其实有一套自身的权值计算方式，为了日后方便使用让我们来了解一下CSS是如何计算权值的吧！

首先CSS里的基础选择器大致有以下几种：

• ID 选择器， 如 #id{}
• 类选择器， 如 .class{}
• 属性选择器， 如 a[href="jirengu.com"]{}
• 伪类选择器， 如 :hover{}
• 伪元素选择器， 如 ::before{}
• 标签选择器， 如 span{}
• 通配选择器， 如 *{}

选择器的权值

选择器	权值
内联Style	1000
ID选择器	100
类选择器	10
伪类选择器	10
属性选择器	10
标签选择器	1
伪元素选择器	1

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

计算的规则

当一个有多个选择器组合在一个元素上时应当遵循如下规则：

1. 计算ID选择器个数总和(X)，类选择器 +属性选择器 + 伪类选择器个数总和(Y)，标签选择器 + 伪元素选择器个数总和(Z)。
2. 按照顺序比较对应X Y Z的个数，多的则优先级更高，相同则比较下一个参数，如若都相同则按照就近原则。
3. !important 具有最高优先级。这个属性会打破引入的规则使代码变得难以维护，不到逼不得已不建议采用。

错误的权值相加理解

当一个元素同时被11个类选择器和1个ID选择器所指定时是否按照计算110>100而采用类选择器的属性呢，其实并不然在CSS权重计算中不存在进位这种现象即使个数再多也严格按照上面所说的优先级关系进行！

参考