CSS 复合选择器全解析：类型、用法与实例

CSS 复合选择器是基础选择器的组合形式，通过不同的组合规则实现更精准的元素选择，大幅提升样式控制的灵活性。本文系统梳理后代选择器、子选择器、并集选择器及伪类选择器的语法、功能与实战用法，结合实例说明其应用场景与核心区别。

一、复合选择器的定义与作用

复合选择器是由两个或多个基础选择器通过特定方式组合而成的选择器，相比基础选择器，其核心优势在于：

1. 精准性：可定位嵌套结构中的特定元素（如 "ul 中的 li"）；
2. 高效性：通过组合规则减少重复代码，实现批量样式控制；
3. 功能性：支持交互状态（如链接 hover、表单聚焦）的样式定义。

常用复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器（链接伪类、:focus 等）。

二、核心复合选择器详解

1. 后代选择器（包含选择器）

功能：选择某元素所有后代元素（包括直接子元素、孙元素等嵌套元素）。
语法：外层元素 内层元素 { 样式声明 }（中间用空格分隔）。
特点：不限制嵌套层级，只要存在包含关系即可选中。

实例：仅将 <ol> 中的 <li> 文字设为粉色（不影响 <ul> 中的 <li>）：

/* 选择ol的所有后代li */
ol li {
  color: pink;
}

<ol>
  <li>我是ol里的li（变粉色）</li>
  <li>我是ol里的li（变粉色）</li>
</ol>
<ul>
  <li>我是ul里的li（不变色）</li>
</ul>

2. 子选择器

功能：仅选择某元素的直接子元素（最近一级后代，即 "亲儿子"），不包含孙元素及更深层级。
语法：父元素 > 子元素 { 样式声明 }（中间用 **>** 分隔）。
特点：严格限制层级，仅匹配直接嵌套关系。

实例：仅将 .nav 的直接子元素 <a> 设为棕色（不影响孙元素 <a>）：

/* 仅选择.nav的直接子元素a */
.nav > a {
  color: rgb(134, 35, 5);
}

<div class="nav">
  <a href="#">我是儿子（变棕色）</a>
  <p>
    <a href="#">我是孙子（不变色）</a>
  </p>
</div>

3. 并集选择器

功能：同时选择多组元素，为其统一设置相同样式，实现 "集体声明"。
语法：选择器1, 选择器2, 选择器3 { 样式声明 }（各选择器间用逗号分隔）。
特点：支持任意类型的基础 / 复合选择器组合，逗号前后的选择器地位平等。

实例：将 <div>、<p> 及 .pig 类下的 <li> 统一设为粉色：

/* 同时选中div、p和.pig下的li */
div, p, .pig li {
  color: pink;
}

<div>熊大（变粉色）</div>
<p>熊二（变粉色）</p>
<span>光头强（不变色）</span>
<ul class="pig">
  <li>小猪佩奇（变粉色）</li>
</ul>

4. 伪类选择器

伪类选择器用于定义元素的特殊状态（如链接的访问状态、鼠标交互状态），语法以冒号 (:) 为标志，常用类型如下：

（1）链接伪类选择器

专门针对 <a> 标签的不同状态设置样式，需遵循LVHA 顺序（link → visited → hover → active）以确保生效：

伪类	作用	示例
a:link	选择未访问过的链接	a:link { color: brown; }
a:visited	选择已访问过的链接	a:visited { color: #05ff0d; }
a:hover	选择鼠标悬停的链接	a:hover { color: #00b98e; }
a:active	选择鼠标按下未松开的链接	a:active { color: #000; }

注意：浏览器默认会为链接添加下划线和蓝色，实际开发中需用 text-decoration: none; 清除默认样式。

（2）:focus 伪类选择器

用于选择获得焦点的表单元素（如输入框被点击或通过 Tab 键选中时），主要应用于 <input>、<textarea> 等可交互表单元素。

语法：input:focus { 样式声明 }
实例：输入框获得焦点时背景变为粉色：

input:focus {
  background-color: pink;
  outline: none; /* 清除默认聚焦边框 */
}

<input type="text"> <!-- 点击时背景变粉色 -->
<input type="text">

三、复合选择器对比与总结

选择器类型	核心作用	语法符号	关键特征	典型场景
后代选择器	选择所有后代元素	空格	包含所有嵌套层级（子、孙等）	列表中的特定项（如 .nav li）
子选择器	选择直接子元素	>	仅匹配最近一级嵌套	导航栏的直接子链接（如 .menu > a）
并集选择器	集体声明样式	逗号	多选择器共享样式	统一页面标题样式（如 h1, h2, h3 { ... }）
链接伪类	定义链接不同状态	:	需按 LVHA 顺序声明	网站导航链接的交互样式
:focus 伪类	选中聚焦的表单元素	:	主要用于表单交互反馈	输入框聚焦时的样式变化

四、实战注意事项

1. 层级关系：后代选择器与子选择器的核心区别在于是否限制嵌套层级，避免混淆导致样式错误；
2. 声明顺序：链接伪类必须按 link → visited → hover → active 顺序声明，否则部分样式可能失效；
3. 性能优化：避免过度嵌套（如 div ul li a span { ... }），复杂选择器会降低渲染效率；
4. 兼容性：所有复合选择器在现代浏览器中均兼容，无需考虑低版本浏览器适配问题。

通过灵活组合上述复合选择器，可实现从简单到复杂的元素定位需求，是 CSS 布局与样式控制的核心技能。