css选择器的优先级是怎样的

css选择器的优先级是怎样的

css选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器
到具体的计算层面，优先级是A、B、C、D的值来决定的，其中它们的值计算规则如下：

• A 的值等于1的前提是存在 内联样式，否则A = 0
• B 的值等于 ID选择器 出现的次数；
• C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
• D 的值等于 标签选择器 和 伪元素 出现的总次数

就比如下面的选择器，它不存在内联样式，所以A = 0，不存在ID选择器B = 0,存在一个类选择器C = 1，存在三个标签选择器D = 3，那么最终计算结果为：{0,0,1,3}

ul olli .red {
	...
}

按照这个结算方式，下面的计算结果为：{0,1,0,0}

#red {
	....
}

我们的比较优先级的方式是从A、B、C、D权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出一个最大值，即可停止
比如第二个例子的B比第一个例子的B相比，1>0，接下来就不用进行比较了，第二个选择器的优先级更高