CSS 选择器优先级参考
CSS 选择器权重计算规则和优先级速查表
优先级计算器
优先级规则
| 优先级 | 选择器类型 | 示例 | 权重 |
|---|---|---|---|
| 最高 | !important | color: red !important; | ∞ |
| 1 | 内联样式 | style="color: red" | 1,0,0,0 |
| 2 | ID 选择器 | #header | 0,1,0,0 |
| 3 | 类/属性/伪类选择器 | .class, [type], :hover | 0,0,1,0 |
| 4 | 元素/伪元素选择器 | div, ::before | 0,0,0,1 |
| 5 | 通配符/组合器 | *, >, +, ~ | 0,0,0,0 |
选择器优先级示例
| 选择器 | 权重值 | 说明 |
|---|---|---|
* | 0,0,0,0 | 通配符选择器 |
div | 0,0,0,1 | 1个元素选择器 |
div p | 0,0,0,2 | 2个元素选择器 |
.class | 0,0,1,0 | 1个类选择器 |
div.class | 0,0,1,1 | 1个元素 + 1个类 |
#id | 0,1,0,0 | 1个ID选择器 |
#id .class | 0,1,1,0 | 1个ID + 1个类 |
#id .class div | 0,1,1,1 | 1个ID + 1个类 + 1个元素 |
div:hover | 0,0,1,1 | 1个元素 + 1个伪类 |
div::before | 0,0,0,2 | 1个元素 + 1个伪元素 |
[type="text"] | 0,0,1,0 | 1个属性选择器 |
div#id.class:hover | 0,1,2,1 | 复合选择器 |