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 ol li .red {
...
}

按照这个结算⽅式，下⾯的计算结果为: {0, 1, 0, 0}

#red {
}

···

我们的⽐较优先级的⽅式是从A到D去⽐较值的⼤⼩，A、B、C、D权重从左到右，依次减⼩。判断优先级时，从左到右，⼀⼀⽐较，直到⽐较出最⼤值，即可停⽌。

⽐如第⼆个例⼦的B与第⼀个例⼦的B相⽐，1>0,接下来就不需要⽐较了，第⼆个选择器的优先级更⾼。