什么是选择器优先级（Specificity）

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

优先级的计算规则

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

1. 如果存在内联样式，那么 A = 1, 否则 A = 0;
2. B 的值等于 ID选择器 出现的次数;
3. C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
4. D 的值等于 标签选择器 和 伪元素 出现的总次数 。

参考->w3对 选择器优先级的定义

例如：

#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出 A B C D 的值：

因为没有内联样式 ，所以 A = 0;
ID选择器总共出现了1次， B = 1;
类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1；
标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3;

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)。

优先级比较规则

比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的。

优先级的特殊情况

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，!important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

其他

所以不存在一个N个嵌套的class选择器优先级会大于ID选择器的情况。

参考

• 可以输入选择器查看优先级specificity
• w3对 选择器优先级的定义