标准答案
- CSS 冲突时不能只看选择器长短，要按层叠规则比较。
- 常见比较顺序是：样式来源和重要性、cascade layer、选择器优先级、最后的书写顺序。
- 选择器优先级可以按四组权重记：内联样式、ID、类/属性/伪类、元素/伪元素。
- 组合选择器会累加权重，比较时从高位到低位逐级比较，不是把数字简单相加。
- !important 会提高声明的重要性，但工程里不要用它处理日常覆盖问题，更应该控制作用域、加载顺序和设计变量。
题目解析
这题的关键是不要把“优先级”说成唯一规则。CSS 真正比较的是 cascade，specificity 只是其中一步。
:where() 的优先级为 0，:is()、:not()、:has() 本身不额外增加权重，会取内部选择器里最高的权重。面试中可以作为加分补充，但基础答案先讲清四组权重。
代码示例
下面两个规则都命中按钮时，ID 选择器会压过类选择器。
CSS
.button.primary {
color: green;
}
#submit {
color: orange;
}常见误区
- 认为选择器越长优先级一定越高。要看 ID、类、元素各自权重。
- 用 !important 覆盖所有问题，导致后续样式无法正常维护。
- 忽略后写规则在同优先级下会覆盖先写规则。