CSS ＞子元素选择器和空格

在 CSS 中，> 符号是 子元素选择器（Child Combinator），它用于选择某个元素的直接子元素（仅限第一层嵌套的子元素，不包含更深层的后代元素）。

语法

父元素 > 子元素 {
  样式规则;
}

示例

假设有以下 HTML 结构：

<div class="parent">
  <div class="child">直接子元素</div>
  <div>
    <div class="grandchild">孙子元素（非直接子元素）</div>
  </div>
</div>

1. 使用 > 选择直接子元素

.parent > .child {
  color: red;
}

• 效果：只有 .child 会变红，.grandchild 不会受影响，因为它不是 .parent 的直接子元素。

2. 对比 空格（后代选择器）

.parent .grandchild {
  color: blue;
}

• 效果：.grandchild 会变蓝，因为它是 .parent 的后代（无论嵌套多深）。

关键区别

选择器	作用	示例	匹配范围
A > B	选择 A 的直接子元素 B	.parent > .child	仅匹配第一层子元素
A B	选择 A 的所有后代 B	.parent .grandchild	匹配所有嵌套层级的 B

适用场景

• > 适用：当你想精确控制样式只影响直接子元素，避免影响更深层嵌套的元素时。

• 空格 适用：当你想影响所有符合条件的后代元素时。

其他类似选择器

• +（相邻兄弟选择器）：选择紧跟在某个元素后的第一个兄弟元素。

• ~（通用兄弟选择器）：选择某个元素后的所有符合条件的兄弟元素。