简述下 css specificity

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 311

Author 回答者: shfshanyue

css specificity 即 css 中关于选择器的权重，以下三种类型的选择器依次下降

id 选择器，如 #app
class、attribute 与 pseudo-classes 选择器，如 .header、[type="radio"] 与 :hover
type 标签选择器和伪元素选择器，如 h1、p 和 ::before

其中通配符选择器 *，组合选择器 + ~ >，否定伪类选择器 :not() 对优先级无影响

另有内联样式 <div class="foo" style="color: red;"></div> 及 !important(最高) 具有更高的权重

:not 的优先级影响 - codepen 可以看出 :not 对选择器的优先级无任何影响

CSS Specificity - codepen 可以看出十几个 class 选择器也没有一个 id 选择器权重高

Author 回答者: onemue

CSS优先级中应该着重讲解CSS权重值计算：

更具w3给出的解释,我们可以讲CSS的权重等级分为A、B、C 3类，他们分别对应着id选择器，class选择器、属性选择器、伪类选择器，标签选择器、伪元素选择器。

将一个选择器整体计算ABC分别进行求和得到一个数组(A，B ，C)，数组值依次比较，选取最高的，如果都相等那么选取靠后的。

当然也有一些比较特殊的伪类选择器进行权重进行特殊的处理：

选择器:is()、:not()、:has()的优先级是选择器列表中最具有复杂性的选择器的优先级取代。
选择器:nth-child()、:nth-last-child()的优先级是伪类本身的优先级（计为一个伪类选择器，也就是计为B），再加上选择器列表中最具复杂性的选择器的优先级。
选择器:where()伪类的优先级被零代替，也就是没有优先级，再优先级计算中不做数。
通用选择符以及其他选择符在优先级中不计数。