# 简述下 css specificity
Issue
欢迎在 Gtihub Issue 中回答此问题: Issue 311 (opens new window)
Author
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 (opens new window) 可以看出:not
对选择器的优先级无任何影响
CSS Specificity - codepen (opens new window) 可以看出十几个 class 选择器也没有一个 id 选择器权重高
Author
CSS 优先级中应该着重讲解 CSS 权重值计算:
更具 w3 给出的解释,我们可以讲 CSS 的权重等级分为 A、B、C 3 类,他们分别对应着 id 选择器,class 选择器、属性选择器、伪类选择器,标签选择器、伪元素选择器。
将一个选择器整体计算 ABC 分别进行求和得到一个数组(A,B ,C),数组值依次比较,选取最高的,如果都相等那么选取靠后的。
当然也有一些比较特殊的伪类选择器进行权重进行特殊的处理:
选择器
:is()
、:not()
、:has()
的优先级是选择器列表中最具有复杂性的选择器的优先级取代。选择器
:nth-child()
、:nth-last-child()
的优先级是伪类本身的优先级(计为一个伪类选择器,也就是计为 B),再加上选择器列表中最具复杂性的选择器的优先级。选择器
:where()
伪类的优先级被零代替,也就是没有优先级,再优先级计算中不做数。通用选择符以及其他选择符在优先级中不计数。