CSS 选择器全解析：从入门到精通，一文搞定！

在我们前端开发者的世界里，CSS 就像是网页的造型师，而选择器 (Selector) 就是这位造型师手中最精准的画笔。它决定了我们设计的样式究竟要应用在哪些元素上。今天，就让我们一起来系统地梳理一下 CSS 的核心——选择器家族，彻底搞懂它们的脾气和用法！

引言：为什么选择器如此重要？

想象一下，如果你要给人群中所有穿红衣服的人发糖，你会怎么做？你的眼睛会自动筛选出“穿红衣服”这个特征。CSS 选择器做的就是这件事：它根据特定的规则（特征）从 HTML 文档树中“选择”出一个或多个元素，然后为它们添加样式。

精准的选择器可以让我们写出更优雅、更高效、更易于维护的 CSS 代码。

1. 通配符选择器

概念

* 号就像一个百搭牌，它能匹配页面中的每一个 HTML 元素。

特点

• 威力巨大：影响范围最广。
• 性能影响：在大型网页上使用会增加浏览器计算样式的负担，应谨慎使用。

场景

通常用于进行一些简单的全局重置，比如清除所有元素的默认内外边距。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 更常用的重置，让宽度计算更直观 */
}

2. ID 选择器

概念

使用 # 前缀加上元素的 id 属性值来选择元素。ID 在页面中是唯一的。

特点

• 极高特异性：它的优先级非常高，很难被覆盖。
• 唯一性：一个页面中相同的 ID 只能出现一次。

场景

用于选择特定的、唯一的元素。但由于其高特异性和唯一性，在 CSS 中应尽量少用，更常用于 JavaScript 获取 DOM 元素。

<div id="header">这里是顶部导航</div>

#header {
  background-color: #333;
  color: white;
  height: 60px;
}

3. 类选择器

概念

使用 . 前缀加上元素的 class 属性值来选择元素。类是可复用的。

特点

• 可复用性：一个类可以被多个元素使用，一个元素也可以有多个类（用空格分隔）。
• 灵活性：是 CSS 中使用最广泛、最核心的选择器。

场景

用于定义可复用的样式模块。这是现代 CSS 编写中最推荐的方式。

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: blue;
  color: white;
}

.btn-secondary {
  background-color: gray;
  color: black;
}

4. 标签选择器

概念

直接使用 HTML 标签名（如 div, p, a）作为选择器。

特点

• 影响范围大：会选择页面上所有该类型的标签。
• 特异性较低：容易被类选择器等覆盖。

场景

用于为页面中某一类标签设置基础样式。

p {
  line-height: 1.6;
  margin-bottom: 1em;
}

a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

5. 属性选择器

概念

通过元素是否存在某个属性，或者属性的值是否满足某些条件来选择元素。语法是 [attr] 或 [attr=value]。

特点

• 非常强大灵活：可以根据属性值进行模糊匹配（如 ^= 表示开头， $= 表示结尾， *= 表示包含）。
• 实用性高：尤其在处理表单元素时。

场景

选择带有特定属性的元素，比如选择所有外部链接、选择特定类型的输入框。

<input type="text" placeholder="请输入姓名">
<input type="email" placeholder="请输入邮箱">
<a href="https://juejin.cn" target="_blank">掘金</a>

/* 选择所有 type 属性为 text 的 input */
input[type='text'] {
  border: 1px solid #ccc;
}

/* 选择所有 href 属性以 https 开头的 a 标签 */
a[href^="https"] {
  color: green;
}

/* 选择所有 target 属性为 _blank 的 a 标签 */
a[target="_blank"]::after {
  content: "↗";
  margin-left: 2px;
}

6. 后代选择器

概念

使用空格分隔两个选择器（如 one two），选择所有被 one 元素包含的 two 元素，无论嵌套多深。

特点

• 范围广：只要是其后代，就会被选中。
• 性能考量：如果嵌套过深，浏览器寻找元素的路径会变长。

场景

用于在某个大的容器内设置其内部元素的样式。

<nav class="menu">
  <ul>
    <li>列表项 <a href="#">链接</a></li>
  </ul>
</nav>

/* 只选择 .menu 里面的 a 标签，不会影响页面其他地方的 a */
.menu a {
  color: red;
}

7. 子代选择器

概念

使用 > 分隔两个选择器（如 one > two），只选择作为 one 元素直接子元素的 two 元素。

特点

• 更精准：只选择直接下一代，不会选择更深层的后代。
• 控制力强：避免了后代选择器可能造成的意外样式影响。

场景

当需要非常精确地控制嵌套关系时使用。

<div class="parent">
  <div class="child">这个会被选中</div>
  <div>
    <div class="grandchild">这个不会被选中</div>
  </div>
</div>

.parent > .child {
  border: 2px solid red;
}

8. 兄弟选择器

概念

• 相邻兄弟选择器 +：选择紧跟在 one 后面的第一个 two 兄弟元素。
• 通用兄弟选择器 ~：选择跟在 one 后面的所有 two 兄弟元素。

特点

• 位置敏感：依赖于元素在文档流中的先后位置。

场景

常用于调整紧跟在某个元素后的元素的样式，比如列表、段落等。

<h2>标题</h2>
<p>这段落会被相邻兄弟选择器选中</p>
<p>这个不会（被+选中），但会被~选中</p>

/* 相邻兄弟选择器 */
h2 + p {
  font-weight: bold;
  color: blue;
}

/* 通用兄弟选择器 */
h2 ~ p {
  margin-left: 20px;
}

9. 并集选择器

概念

使用 , 逗号将多个选择器分隔在一起（如 one, two）。它选择所有能被列表中任意一个选择器选中的元素。

特点

• 分组：可以将相同的样式规则应用于多个不同的元素，实现代码复用，减少重复。

场景

为多个不同的元素设置相同的样式。

h1, h2, h3, .title, #page-title {
  font-family: 'Microsoft YaHei', sans-serif;
  margin-bottom: 0.5em;
}

10. 伪类选择器

概念

以 : 开头，用于选择处于特定状态的元素，例如鼠标悬停、获得焦点、第一个子元素等。

特点

• 动态性：描述的是文档的当前状态，这个状态可能会随着用户交互而改变。

场景

实现交互反馈和选择特定序列的元素。

/* 用户交互状态 */
a:hover {
  color: orange;
}
button:active {
  transform: scale(0.98);
}
input:focus {
  outline: 2px solid blue;
}

/* 结构状态 */
li:first-child {
  font-weight: bold;
}
li:nth-child(2n) { /* 偶数行 */
  background-color: #f9f9f9;
}
tr:nth-child(odd) { /* 奇数行 */
  background-color: #eee;
}

11. 伪元素选择器

概念

以 :: 开头（注意是两个冒号，但单冒号也可被识别），用于在元素的内容之前或之后插入虚拟的元素，或者选择元素的特定部分（如首行、首字母）。

特点

• 创建虚拟内容：它不像真正的 DOM 元素，但可以为其添加样式。
• 装饰性强：常用于 UI 装饰，不承载实际业务逻辑内容。

场景

清除浮动、添加装饰性内容、设置首字母下沉等。

/* 在元素内容前/后添加内容 */
.box::before {
  content: "«"; /* content 属性必须写 */
  color: blue;
}
.box::after {
  content: "»";
  color: red;
}

/* 清除浮动 (经典技巧) */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 选择首字母实现下沉效果 */
p::first-letter {
  font-size: 2em;
  float: left;
  line-height: 1;
}

总结与建议

选择器	示例	特点	优先级
通配符	*	范围最广，性能需注意	0
ID	#box	唯一，高特异性	100
类	.box	可复用，最灵活	10
标签	div	基础，影响范围大	1
属性	[type='text']	灵活，功能强大	10
后代	.one .two	选择所有后代	为选择器之和
子代	.one > .two	只选直接子元素	为选择器之和
相邻兄弟	.one + .two	选择紧邻的后一个	为选择器之和
并集	.one, .two	分组，代码复用	各自独立
伪类	:hover	动态状态	10
伪元素	::before	创建虚拟内容	1