选择器优先级

优先级

权重	选择器
0	通配选择器：* 选择符：+、>、~、空格、|| 逻辑组合伪类：:not()、:is()、:where 等
1	标签选择器
10	类选择器：.foo 属性选择器：[foo] 伪类：:hover
100	ID 选择器
1000	样式内联（style）
10000	!import

优先层级之间是难以跨越的，之所以有权重计算法，是为了计算方便，而且现实中不可能连写 10 个选择器，也不会出现跨越层级的现象

增加优先级技巧

场景：增加 .foo 的权重

.foo[class]

下面两个方法都都增加耦合，降低可维护性

/* 增加类名 */
.foo.bar
/* 添加标签选择器 */
div.foo