CSS 基础：如何快速掌握选择器与优先级规则？

引言 / 什么是CSS选择器与优先级

在前端开发中，CSS（层叠样式表）是控制网页视觉表现的核心技术。而选择器与优先级规则则是CSS的两大基石：选择器决定了哪些HTML元素会被样式影响，优先级规则则决定了当多个样式冲突时，哪个样式最终生效。

想象一个电商网站的商品卡片：标题需要加粗显示，价格需要红色突出，按钮需要悬停效果。如果选择器写得不精准，可能导致所有文本都变红；如果优先级计算错误，悬停效果可能完全失效。本文将通过实例拆解选择器的类型与优先级计算方法，帮助你写出更精准、可维护的CSS代码。

CSS选择器基础类型

元素选择器（标签选择器）

直接通过HTML标签名选择元素，是最基础的选择器。

p {
  color: #333;
  font-size: 16px;
}

适用场景：全局基础样式（如所有段落文字颜色）。

类选择器（Class Selector）

通过元素的class属性选择，以.开头，可重复使用。

.price {
  color: red;
  font-weight: bold;
}

<div class="price">¥99.00</div>

优势：一个类可应用于多个元素，适合复用样式。

ID选择器

通过元素的id属性选择，以#开头，唯一性是其核心特性。

#header {
  background-color: #f8f8f8;
  padding: 20px;
}

<header id="header">网站标题</header>

提示：ID选择器优先级极高，且一个页面中ID应唯一，建议谨慎使用。

属性选择器

通过元素的属性或属性值选择，适合特定条件的元素。

/* 选择所有带title属性的元素 */
[title] {
  border: 1px dashed #ccc;
}

/* 选择type="text"的input元素 */
input[type="text"] {
  width: 200px;
}

伪类与伪元素选择器

• 伪类：表示元素的特殊状态（如:hover、:focus）。

  a:hover {
    color: #0066cc;
  }
  

• 伪元素：选择元素的特定部分（如::before、::after）。

  .tooltip::after {
    content: "→";
    margin-left: 5px;
  }
  

CSS优先级规则详解

当多个选择器作用于同一元素时，浏览器通过优先级计算决定最终生效的样式。优先级由四部分组成（从高到低）：

1. !important（最高优先级，慎用）
2. 内联样式（直接写在HTML标签的style属性中）
3. 选择器特异性（Specificity）
4. 来源顺序（后定义的样式覆盖先定义的）

选择器特异性计算

特异性用(a, b, c, d)表示，数值越大优先级越高：

• a：!important的数量（通常为0）
• b：ID选择器的数量
• c：类/属性/伪类选择器的数量
• d：元素/伪元素选择器的数量

示例对比：

优先级冲突案例：

<div id="box" class="container">
  <p class="text">Hello World</p>
</div>

/* 规则1 */
#box .text { color: red; }    /* (0,1,1,0) */
/* 规则2 */
div.container p { color: blue; } /* (0,0,1,2) */

结果：文字显示红色，因为规则1的特异性更高。

进阶技巧：解决样式冲突

技巧1：合理使用选择器组合

通过组合选择器缩小范围，避免全局污染。

/* 仅选择.article下的.title */
.article .title {
  font-size: 24px;
}

技巧2：利用特异性覆盖

当需要覆盖第三方库样式时，可通过增加选择器层级提升特异性。

/* 原始样式（来自UI库） */
.button {
  padding: 8px 16px;
}

/* 自定义覆盖 */
.app .button {
  padding: 12px 24px;
}

技巧3：!important的谨慎使用

仅在以下场景使用：

• 覆盖内联样式（如用户自定义主题）
• 覆盖浏览器默认样式（如<input>的聚焦边框）

/* 强制覆盖所有冲突样式 */
.error-message {
  color: red !important;
}

技巧4：CSS预处理器的嵌套优化

使用Sass/Less时，嵌套规则会自动生成组合选择器，需注意特异性膨胀。

// Sass嵌套示例
.card {
  .title {
    font-size: 18px;
    &:hover { color: #0066cc; } // 生成 .card .title:hover
  }
}

常见问题

Q：为什么我的样式被覆盖了？ A：检查以下三点：

1. 选择器特异性是否足够高
2. 样式是否被!important覆盖
3. 是否存在内联样式或后定义的样式

Q：如何快速计算选择器特异性？ A：使用浏览器开发者工具：

1. 右键元素 → 【检查】
2. 在【Styles】面板中查看被划掉的样式
3. 鼠标悬停选择器，工具会显示特异性值（如0,1,2,1）

Q：ID选择器是否应该完全避免使用？ A：并非绝对。ID选择器适合：

• 页面唯一元素（如页眉、页脚）
• 与JavaScript交互的元素（通过document.getElementById）
• 需要极高特异性的场景（但优先考虑重构CSS结构）

小结

掌握CSS选择器与优先级规则是前端开发的基础能力：

1. 精准选择：根据场景选择元素、类、ID或属性选择器
2. 计算优先级：通过特异性四元组（a,b,c,d）量化比较
3. 解决冲突：利用组合选择器、特异性覆盖或!important（谨慎）

建议通过实际项目练习：尝试为一个复杂页面（如电商产品页）编写CSS，故意制造冲突后逐步调试解决。随着经验积累，你会逐渐形成“优先级直觉”，写出更健壮的样式代码。