` |
| ID选择器 | 0100 | `#header { ... }` |
| 类选择器/伪类/属性选择器 | 0010 | `.active { ... }`、`:hover { ... }`、`[type="text"] { ... }` |
| 元素选择器/伪元素 | 0001 | `div { ... }`、`::before { ... }` |
| 通配符（`*`）/组合符 | 0000 | `* { ... }`、`div p { ... }` |
**计算方法**：
将选择器中各类选择器的权重值相加，**从左到右比较**，左侧数值大的优先级更高（不进位）。
#### 示例对比：
| 选择器组合 | 权重值（千位-百位-十位-个位） | 优先级排序（由高到低） |
|-------------------------------------|------------------------------|------------------------|
| `div#header .nav li.active` | 0-1-2-2（ID:1，类:2，元素:2） | 1 |
| `#header .active` | 0-1-1-0（ID:1，类:1） | 2 |
| `div.nav .active` | 0-0-2-1（类:2，元素:1） | 3 |
| `div ul li` | 0-0-0-3（元素:3） | 4 |
### 2.3 优先级特殊规则
#### 2.3.1 `!important` 优先级最高
`!important` 会覆盖所有普通规则，但需注意：
- 仅作用于**属性值**，不影响选择器优先级
- 避免滥用（破坏样式层级关系，难以维护）
- 内联样式 + `!important` > 外部样式 + `!important`
**示例**：
```css
/* 即使ID选择器权重更高，但!important覆盖 */
#box {
color: blue; /* 权重0-1-0-0 */
}
.text {
color: red !important; /* 权重0-0-1-0，但!important优先级更高 */
}
```
#### 2.3.2 继承样式优先级最低
元素从父元素继承的样式优先级**低于所有直接应用的样式**。
**示例**：
```css
.parent {
color: red; /* 父元素样式 */
}
.child {
color: blue; /* 子元素直接样式，覆盖继承样式 */
}
```
#### 2.3.3 相同优先级时，后定义的规则生效
当两个规则权重完全相同时，**后出现的规则**会覆盖先出现的规则。
**示例**：
```css
/* 优先级相同，后者生效 */
.box { color: red; }
.box { color: blue; } /* 最终文本为蓝色 */
```
### 2.4 优先级实战技巧
#### 技巧1：避免过度嵌套选择器
嵌套层级越深，权重计算越复杂，且可能导致优先级过高难以覆盖。
**反例**：
```css
/* 过度嵌套，权重冗余 */
div.container > section.content > article.post > h2.title {
color: #333;
}
```
**优化**：
```css
/* 精简为类选择器，权重清晰 */
.post-title {
color: #333;
}
```
#### 技巧2：使用优先级计算器验证
复杂选择器可通过在线工具（如 [Specificity Calculator](https://specificity.keegan.st/)）计算权重，避免手动计算错误。
#### 技巧3：利用伪类提升优先级
当需要微调样式且避免使用`!important`时，可叠加伪类`:not()`提升权重（不影响逻辑）。
**示例**：
```css
/* 原权重0-0-1-0 */
.btn { padding: 8px; }
/* 叠加:not()后权重0-0-2-0，优先级提升 */
.btn:not(.none) { padding: 10px; }
```
## 三、注意事项
### 3.1 伪元素的常见误区
- ❌ 错误：为伪元素添加`content`属性后未设置`display`类型，导致样式不生效
✅ 正确：根据需求设置`display: inline-block`/`block`（如`::after`清除浮动需设为`block`）
- ❌ 错误：使用单冒号`:`定义CSS3伪元素（如`:before`）
✅ 正确：CSS3规范中伪元素需用双冒号`::`，但为兼容旧浏览器，单冒号仍可识别（建议双冒号）
### 3.2 优先级调试技巧
- 使用浏览器开发者工具（Elements > Styles）查看**已应用样式**，被划掉的样式表示被覆盖
- 在样式后添加`!important`临时测试优先级问题（调试后移除）
- 通过添加/移除选择器类型（如临时添加ID）快速定位权重问题
## 四、自测题
1. 以下CSS选择器的优先级从高到低排序正确的是：
A. `#nav .item` → `.nav-item` → `div ul li` → `div`
B. `div#nav .item` → `#nav .item` → `.nav .item` → `div.item`
C. `::before` → `div::before` → `.box::before` → `#box::before`
2. 如何仅使用CSS实现“点击按钮时，按钮文本前添加√图标”的效果？（提示：结合`:active`伪类和`::before`伪元素）
3. 解释为什么以下代码中文本最终颜色为蓝色：
```css
.container p { color: red; }
#content p { color: blue; }
```
（答案见附录C）
文本内容
2 分钟阅读
372 字
×
微信扫一扫分享
打开微信扫一扫，分享文章给朋友
如果文章对您有帮助，欢迎支持作者继续创作
