在 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 |
适用场景
-
>适用：当你想精确控制样式只影响直接子元素，避免影响更深层嵌套的元素时。 -
空格适用：当你想影响所有符合条件的后代元素时。
其他类似选择器
-
+（相邻兄弟选择器）：选择紧跟在某个元素后的第一个兄弟元素。 -
~（通用兄弟选择器）：选择某个元素后的所有符合条件的兄弟元素。