它们都属于关系选择器（也叫组合器），用来表达元素之间的层级关系。

1. 后代选择器（Descendant Combinator） #

• 写法：A B（中间用空格）
• 选中 A 内部所有层级中的 B 元素，无论嵌套多深。

div p {
  color: #666;
}
/* div 里的所有段落（包括子元素中的段落、孙子元素中的段落）都会变成灰色 */

• 适合：需要约束样式的作用域，但又不在乎目标元素的直接父子关系。

2. 子代选择器（Child Combinator） #

• 写法：A > B（> 两边可以有空格）
• 只选择 A 的直接子元素 B，不涉及更深的后代。

ul > li {
  margin-bottom: 8px;
}
/* 只对 ul 正下方的 li 生效，不影响 li 里再嵌套的 ul 下的 li */

• 适合：希望样式仅影响紧邻的一层，避免污染深层嵌套结构。 对比示例： 假设有 HTML 结构：

<div class="container">
  <p>段落1（直接子元素）</p>
  <div class="inner">
    <p>段落2（孙元素）</p>
  </div>
</div>

.container p {
  border-left: 2px solid blue;
}
/* 段落1 和 段落2 都会出现蓝色左边框（后代） */
.container > p {
  border-left: 2px solid red;
}
/* 只有段落1 会出现红色左边框（直接子元素） */

实践建议：

• 能使用子代选择器的地方，优先用子代，避免无意间影响深层元素。
• 后代选择器更适合建立”组件内部所有某类元素”的宽松规则。