CSS 后代选择器与子代选择器：从入门到实战

在 CSS 中，选择器是连接 HTML 结构与样式的桥梁。当我们面对嵌套层级较深的页面结构时，如何精准地选中目标元素，是写出高效、可维护样式代码的关键。今天我们就来系统学习两种最常用的组合选择器------后代选择器 与子代选择器，搞清楚它们的区别、适用场景以及常见坑点。

后代选择器（Descendant Selector）用空格连接两个或多个选择器，表示选中所有位于指定祖先元素内部的元素，无论嵌套多少层。

css 复制代码

/* 选中 div 内部所有的 p 元素，包括嵌套在更深层级的 p */
div p {
  color: red;
}

子代选择器（Child Selector）用 > 符号连接两个选择器，表示只选中直接子元素，不包含更深层级的后代。

css 复制代码

/* 只选中 div 的直接子元素 p，不包含孙级及更深的 p */
div > p {
  color: red;
}

下面通过一个完整的 HTML 结构来直观对比两者的差异。

html 复制代码

<div class="container">
  <p>我是直接子元素 p1</p>
  <div class="inner">
    <p>我是孙级元素 p2</p>
  </div>
</div>

css 复制代码

/* 后代选择器：p1 和 p2 都会被选中 */
.container p {
  color: blue;
}

/* 子代选择器：只有 p1 被选中，p2 不受影响 */
.container > p {
  font-weight: bold;
}

运行结果：

当需要统一某个模块内部所有同类元素的样式时，后代选择器非常方便。例如导航栏内部所有链接：

css 复制代码

.nav a {
  text-decoration: none;
  color: #333;
}

当只想影响某一层级的元素，避免误伤深层嵌套时，子代选择器更精准。例如列表项的直接子元素图标：

css 复制代码

.list-item > .icon {
  width: 20px;
  height: 20px;
}

希望这篇文章能帮你彻底分清这两个选择器，写出更精准、更高效的 CSS 代码。