CSS3 基础 - CSS3 选择器 - 选择器优先级

核心知识点

选择器优先级的基本概念
选择器优先级的计算方法
选择器优先级的规则
优先级冲突的解决策略
选择器优先级的最佳实践
!important 声明的使用

学习目标

掌握选择器优先级的基本概念和计算方法
理解选择器优先级的规则和应用场景
能够正确解决优先级冲突问题
了解 !important 声明的使用方法和注意事项
掌握选择器优先级的最佳实践

重点难点

重点：选择器优先级的计算方法和规则
难点：复杂选择器的优先级计算和优先级冲突的解决

理论讲解

选择器优先级的基本概念

选择器优先级（也称为特异性）是 CSS 中用于决定哪个样式规则应该应用于元素的规则。当多个选择器匹配同一个元素时，具有更高优先级的选择器的样式会覆盖优先级较低的选择器的样式。

选择器优先级的计算方法

选择器优先级使用一个四位数字表示，格式为 [a, b, c, d]，其中：

a：内联样式（style 属性），值为 1 或 0
b：ID 选择器的数量
c：类选择器、属性选择器、伪类选择器的数量
d：元素选择器、伪元素选择器的数量

优先级计算规则如下：

首先比较 a 值，a 值大的优先级高
如果 a 值相同，比较 b 值，b 值大的优先级高
如果 b 值相同，比较 c 值，c 值大的优先级高
如果 c 值相同，比较 d 值，d 值大的优先级高
如果所有值都相同，则后定义的规则覆盖先定义的规则

常见选择器的优先级

选择器类型	优先级值	示例
内联样式	1,0,0,0	`style="color: red;"`
ID 选择器	0,1,0,0	`#header`
类选择器	0,0,1,0	`.nav`
属性选择器	0,0,1,0	`[type="text"]`
伪类选择器	0,0,1,0	`:hover`
元素选择器	0,0,0,1	`div`
伪元素选择器	0,0,0,1	`::before`
通配符选择器	0,0,0,0	`*`
继承的样式	无优先级	-

`!important` 声明

!important 声明可以覆盖任何其他优先级的样式规则，包括内联样式。使用 !important 声明的语法如下：

selector {
  property: value !important;
}

优先级冲突的解决策略

当遇到优先级冲突时，可以采用以下策略解决：

使用更具体的选择器：增加选择器的特异性
调整选择器的顺序：后定义的规则覆盖先定义的规则
使用 !important 声明：谨慎使用，仅作为最后的手段
重构 CSS 代码：优化选择器结构，减少优先级冲突

代码示例

选择器优先级计算示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器优先级计算示例</title>
  <style>
    /* 元素选择器 - 优先级: 0,0,0,1 */
    p {
      color: blue;
    }
    
    /* 类选择器 - 优先级: 0,0,1,0 */
    .highlight {
      color: green;
    }
    
    /* ID 选择器 - 优先级: 0,1,0,0 */
    #special {
      color: red;
    }
    
    /* 复合选择器 - 优先级: 0,0,1,1 */
    p.highlight {
      color: purple;
    }
    
    /* 复合选择器 - 优先级: 0,1,1,1 */
    p#special.highlight {
      color: orange;
    }
  </style>
</head>
<body>
  <p>普通段落（蓝色）</p>
  <p class="highlight">高亮段落（绿色）</p>
  <p id="special">特殊段落（红色）</p>
  <p id="special" class="highlight">特殊高亮段落（橙色）</p>
</body>
</html>

优先级冲突解决示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优先级冲突解决示例</title>
  <style>
    /* 通用选择器 - 优先级: 0,0,0,0 */
    * {
      color: gray;
    }
    
    /* 元素选择器 - 优先级: 0,0,0,1 */
    p {
      color: blue;
    }
    
    /* 类选择器 - 优先级: 0,0,1,0 */
    .text {
      color: green;
    }
    
    /* 更具体的选择器 - 优先级: 0,0,1,1 */
    p.text {
      color: purple;
    }
    
    /* 使用 !important - 优先级: 最高 */
    .important-text {
      color: red !important;
    }
  </style>
</head>
<body>
  <p>普通段落（蓝色，覆盖通用选择器的灰色）</p>
  <p class="text">类段落（紫色，覆盖元素选择器的蓝色）</p>
  <p class="text important-text">重要段落（红色，!important 覆盖其他样式）</p>
</body>
</html>

选择器顺序示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器顺序示例</title>
  <style>
    /* 第一个规则 */
    .box {
      background-color: red;
      color: white;
      padding: 20px;
    }
    
    /* 第二个规则 - 相同优先级，后定义的覆盖先定义的 */
    .box {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box">
    这个盒子的背景色是蓝色（后定义的规则覆盖了先定义的红色）
  </div>
</body>
</html>

ASCII 示意图

选择器优先级计算示意图

+-------------------------+
| 选择器优先级计算          |
+-------------------------+
| 优先级格式: [a, b, c, d] |
+-------------------------+
| a: 内联样式 (1 或 0)     |
| b: ID 选择器数量         |
| c: 类/属性/伪类数量       |
| d: 元素/伪元素数量        |
+-------------------------+
| 比较顺序: a → b → c → d  |
+-------------------------+

选择器优先级层次示意图

+-------------------------+
| 选择器优先级从高到低       |
+-------------------------+
| !important 声明         |
+-------------------------+
| 内联样式 (style 属性)    |
+-------------------------+
| ID 选择器 (#id)         |
+-------------------------+
| 类选择器 (.class)       |
| 属性选择器 ([attr])     |
| 伪类选择器 (:hover)     |
+-------------------------+
| 元素选择器 (element)    |
| 伪元素选择器 (::before) |
+-------------------------+
| 通配符选择器 (*)        |
+-------------------------+
| 继承的样式              |
+-------------------------+

常见问题与解决方案

问题 1：样式不按预期应用

症状：定义的样式没有应用到元素上，可能是因为优先级问题
解决方案：

检查选择器的优先级，使用更具体的选择器
检查样式规则的顺序，确保后定义的规则正确覆盖先定义的规则
使用浏览器开发者工具检查元素的计算样式，查看哪个样式被应用

问题 2：过度使用 `!important`

症状：CSS 代码中大量使用 !important 声明，导致样式难以维护
解决方案：

尽量避免使用 !important 声明
使用更具体的选择器来提高优先级
重构 CSS 代码，优化选择器结构
只在必要时使用 !important，如覆盖内联样式或第三方库的样式

问题 3：复杂选择器的优先级计算错误

症状：复杂选择器的优先级计算结果与预期不符
解决方案：

分解选择器，分别计算每个部分的优先级
使用优先级计算工具验证计算结果
简化选择器结构，提高代码可读性

实战练习

练习 1：优先级计算

计算以下选择器的优先级：

div
.container
#header
div.container
div#header.container
div.container .item
div#header.container .item.active

练习 2：优先级冲突解决

创建一个 HTML 页面，包含以下元素：

一个带有 class="box" 的 div 元素
一个带有 id="special-box" 和 class="box" 的 div 元素

定义以下样式规则：

为所有 div 元素设置背景色为灰色
为 .box 类设置背景色为蓝色
为 #special-box 设置背景色为红色
为 div.box 设置背景色为绿色

观察每个元素的背景色，并解释原因。

练习 3：`!important` 声明的使用

创建一个 HTML 页面，包含一个带有 id="button" 和 class="btn primary" 的 button 元素。