- A+
所属分类：Web前端
CSS 选择器权重
声明：本文参考来源于MDN CSS 优先级（80％）和B站尚硅谷的课程（20％）
我想你一定是来进行速查的，所以我会尽量精简文章内容，保证不浪费时间，不说废话
文章包括新的:is和:where（实验性）的说明
优先级：概念
优先级就是分配给 CSS 声明的一个权重，由 匹配的选择器中的 每一种选择器类型的 数值 决定。
多个 CSS 优先级相等的时候，最后的那个选择器将会被应用到元素上。
速查：六点
- 格式：(1 | 0,a,b,c)
- 1 | 0: 是否有!important
- a: id的个数
- b: .class :matix [key]的个数
- c: el, ::el 的个数
- 冲突比较：从左到右，后来居上
- 简记：
- !imp > 行内 > id > .class > el > 通配符 > 继承
- 如果有!imp，那么即使是jsDOM也无法修改
- 提示：VSCode能自动计算权重
- 注意：
:not和:is本身对优先级没有影响，但是，在 :not和is内部声明的选择器会影响优先级:where()和其中的选择器的优先级是 0
比较：后来者居上，a>b>c
- 从左到右：a->b->c，从左到右比较
/* A选择器：(0,2,3) */ :is(h1) div:nth-child(2n):not(p:selected) /* B选择器：(0,2,1) */ h1 div.headtext[needcolor] /* 1. 0=0 2. 2=2 3. 3>1 4. A选择器胜出 */ - 后来居上：前面写的被后来覆盖（前提：后者优先级>=前者）
<link href="foo.css"> <link href="bar.css"> <TodoList /> <!-- green --> /* foo.css */ TodoList { color: red; } /* bar.css */ TodoList { color: green; } - 无影响者：通配选择符（
*）关系选择符（+,>,~," ",||）和 否定伪类:not()对优先级没有影响
!important：核弹级声明
当在一个样式声明中使用它，此声明将覆盖任何其他声明
无视：DOM树
什么意思？直接上代码！
body h1 { color: green; } /* 后来居上 */ html h1 { color: purple; } <html> <body> <h1>Here is a title!</h1> </body> </html> h1将被渲染成紫色。
其他：关于where选择器
实验性: 这是一项实验性技术，在将其用于生产之前，请仔细检查MDN浏览器兼容性表格。
给你康好了QAQ：
- Chrome 88+
- Firefox 78+
- Safari 14+
- IE ？？？ 早没有了
工具：计算优先级
如果你的编辑器没有查看优先级的功能
那么这是一个网站，供你计算优先级：Specificity Calculator
