选择器优先级
优先级
| 权重 | 选择器 |
|---|---|
| 0 | 通配选择器：* 选择符：+、>、~、空格、|| 逻辑组合伪类：:not()、:is()、:where 等 |
| 1 | 标签选择器 |
| 10 | 类选择器：.foo 属性选择器：[foo] 伪类：:hover |
| 100 | ID 选择器 |
| 1000 | 样式内联（style） |
| 10000 | !import |
优先层级之间是难以跨越的，之所以有权重计算法，是为了计算方便，而且现实中不可能连写 10 个选择器，也不会出现跨越层级的现象
更改优先级技巧
- 通过属性选择器增加权重
- 类选择器增加
[class]
- 类选择器增加
.foo[class]
:is伪类提高权重:is会权重取决于选择器列表中优先级最高的选择器，所以可以往列表中增加无用的，但是优先级高的选择器，从而提高目标选择器的权重
:is(.foo, #useless)
:where伪类降低权重:where会使优先级降低为 0
:where(.foo)
当书写库样式时非常合适，可以让使用方非常方便的重写样式