跳到主要内容

CSS 选择器概览

在前面的章节中，你已经了解了 CSS 的基本语法和工作方式。现在，让我们深入学习 CSS 的核心概念之一——选择器（Selector）。选择器是 CSS 的"导航系统"，它告诉浏览器哪些元素应该应用哪些样式。

什么是选择器？​

选择器是 CSS 规则的第一部分，用于选择要应用样式的 HTML 元素。

/* 选择器 { 属性: 值; } */
p {
  color: blue;
}

在这个例子中，p 就是选择器，它选择了所有的 <p> 元素，并将它们的文字颜色设置为蓝色。

选择器的作用​

选择器的主要作用是：

  1. 定位元素：精确找到需要样式化的 HTML 元素
  2. 组织样式：通过不同的选择器，为不同的元素应用不同的样式
  3. 提高效率：一次选择多个元素，避免重复编写样式
/* 没有选择器，需要为每个元素单独写样式 */
<p style="color: blue;">段落 1</p>
<p style="color: blue;">段落 2</p>
<p style="color: blue;">段落 3</p>

/* 使用选择器，一次选择所有段落 */
p {
  color: blue;
}

选择器的分类思路​

CSS 选择器可以按照不同的方式进行分类。我们按照从简单到复杂的顺序来学习：

1. 基础选择器（Basic Selectors）​

基础选择器是最简单、最常用的选择器类型，包括：

  • 元素选择器：选择特定类型的 HTML 元素
  • 类选择器：选择具有特定 class 属性的元素
  • ID 选择器：选择具有特定 id 属性的元素
  • 通用选择器：选择所有元素
/* 元素选择器 */
p { }

/* 类选择器 */
.highlight { }

/* ID 选择器 */
#header { }

/* 通用选择器 */
* { }

2. 属性选择器（Attribute Selectors）​

属性选择器根据元素的属性来选择元素：

/* 选择具有特定属性的元素 */
input[type="text"] { }

/* 选择属性值以特定字符串开头的元素 */
a[href^="https"] { }

3. 组合选择器（Combinators）​

组合选择器通过元素之间的关系来选择元素：

  • 后代选择器：选择某个元素的所有后代元素
  • 子选择器：选择某个元素的直接子元素
  • 相邻兄弟选择器：选择紧跟在某个元素后面的兄弟元素
  • 通用兄弟选择器：选择某个元素后面的所有兄弟元素
/* 后代选择器 */
div p { }

/* 子选择器 */
div > p { }

/* 相邻兄弟选择器 */
h1 + p { }

/* 通用兄弟选择器 */
h1 ~ p { }

4. 伪类选择器（Pseudo-class Selectors）​

伪类选择器选择处于特定状态的元素：

/* 链接的悬停状态 */
a:hover { }

/* 第一个子元素 */
li:first-child { }

/* 表单元素的焦点状态 */
input:focus { }

5. 伪元素选择器（Pseudo-element Selectors）​

伪元素选择器选择元素的特定部分：

/* 第一行 */
p::first-line { }

/* 第一个字母 */
p::first-letter { }

/* 之前插入内容 */
p::before { }

选择器的组合能力​

选择器最强大的特性之一是可以组合使用，创造出更精确的选择：

组合多个选择器​

你可以将多个选择器组合在一起，选择同时满足多个条件的元素：

/* 选择既是 p 元素，又有 highlight 类的元素 */
p.highlight {
  color: yellow;
}

/* 选择既有 highlight 类，又有 active 类的元素 */
.highlight.active {
  font-weight: bold;
}

组合选择器和伪类​

你可以将基础选择器与伪类组合：

/* 选择第一个段落 */
p:first-child {
  font-size: 20px;
}

/* 选择悬停时的链接 */
a:hover {
  color: red;
}

组合组合选择器​

你还可以将组合选择器与其他选择器组合：

/* 选择 div 中所有具有 highlight 类的段落 */
div p.highlight {
  background-color: yellow;
}

/* 选择紧跟在 h1 后面的第一个段落 */
h1 + p.highlight {
  margin-top: 0;
}

选择器列表​

你可以使用逗号将多个选择器组合成一个规则：

/* 选择所有 h1、h2 和 h3 元素 */
h1, h2, h3 {
  color: blue;
  font-weight: bold;
}

/* 选择所有段落和具有 highlight 类的元素 */
p, .highlight {
  margin: 10px 0;
}

学习顺序说明​

在本教程的第二部分，我们将按照以下顺序学习选择器：

第一步：基础选择器​

首先学习最常用的四类基础选择器：

  • 元素选择器
  • 类选择器
  • ID 选择器
  • 通用选择器

这些选择器是 CSS 的基础，几乎每个 CSS 文件都会用到。

第二步：属性选择器​

学习如何根据元素的属性来选择元素。这在处理表单元素、链接等场景时非常有用。

第三步：组合选择器​

学习如何通过元素之间的关系来选择元素。这让你能够创建更精确、更有层次的选择。

第四步：伪类和伪元素​

学习如何选择处于特定状态的元素，以及如何选择元素的特定部分。

第五步：层叠规则​

最后，学习当多个选择器匹配同一个元素时，浏览器如何决定应用哪个样式。这包括：

  • 特异性（Specificity）的计算
  • 层叠（Cascade）的规则
  • 继承（Inheritance）的机制
  • !important 的使用

选择器的实际应用​

在实际开发中，选择器的使用遵循以下原则：

1. 优先使用类选择器​

类选择器是最灵活、最可复用的选择器：

/* 推荐：使用类选择器 */
.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
}

/* 不推荐：使用 ID 选择器（除非确实需要） */
#button {
  padding: 10px 20px;
}

2. 避免过度嵌套​

虽然组合选择器很强大，但过度嵌套会让代码难以维护：

/* 不推荐：过度嵌套 */
div.container section.content article.post header.title h1 { }

/* 推荐：使用类选择器 */
.post-title { }

3. 保持选择器简洁​

简洁的选择器更容易理解和维护：

/* 推荐：简洁明了 */
.highlight { }

/* 不推荐：过于复杂 */
div.container > section:first-child > article.post.highlight.active { }

小结​

选择器是 CSS 的核心概念之一：

  • 作用：选择要应用样式的 HTML 元素
  • 分类：基础选择器、属性选择器、组合选择器、伪类、伪元素
  • 组合能力：可以组合使用，创造更精确的选择
  • 学习顺序：从简单到复杂，循序渐进

在接下来的章节中，我们将深入学习每种选择器的用法和最佳实践。首先，让我们从最基础的选择器开始——元素选择器、类选择器、ID 选择器和通用选择器。