优先级计算

1. 优先级层级

比较规则：A > B > C > D，逐位比较。

#nav .list li:hover → (0, 1, 2, 1)
.nav li             → (0, 0, 1, 1)
li                  → (0, 0, 0, 1)

2. 特殊情况

!important

.text {
  color: red !important;
} /* 优先级最高 */

优先级：内联 !important > 普通 !important > 内联 > 普通

:where() 和 :is()

:is(#id, .class) p {
} /* 取最高：(0,1,0,1) */
:where(#id, .class) p {
} /* 始终为 0：(0,0,0,1) */

不影响优先级

通配符 *、组合符 > + ~、:not() 本身不计（参数计）

3. 层叠规则

优先级相同时：来源 > 层叠层 > 顺序

4. 最佳实践

• 避免使用 !important
• 避免使用 ID 选择器
• 使用 BEM 命名控制优先级
• 利用 @layer 管理优先级