CSS 选择器优先级是如何计算的？
优先级权重
从高到低：
| 等级 | 类型 | 权重 | 示例 |
|---|---|---|---|
| 1 | !important |
最高 | color: red !important |
| 2 | 内联样式 | 1000 | style="color: red" |
| 3 | ID 选择器 | 100 | #header |
| 4 | 类/伪类/属性 | 10 | .nav、:hover、[type] |
| 5 | 元素/伪元素 | 1 | div、::before |
| 6 | 通配符 | 0 | * |
计算示例
#nav .item { } /* 100 + 10 = 110 */
div .item:hover { } /* 1 + 10 + 10 = 21 */
#nav > div.item { } /* 100 + 1 + 10 = 111 */注意事项
- 权重不可进位：11 个类选择器（110）依然低于 1 个 ID（100）
- 相同权重：后写的覆盖先写的
!important：尽量不用，只在覆盖第三方库时使用- 继承的样式：优先级最低，甚至低于通配符
* { color: black; } /* 0 权重 */
div { color: blue; } /* 1 权重 */
/* 如果 div 继承了 * 的 color，但 div 自己的 color:blue 生效 */实用技巧
- 避免使用 ID 选择器（优先级太高，难以覆盖）
- 使用 CSS 变量代替复杂优先级管理
- BEM 命名规范可以避免优先级冲突