后代选择器用空格选所有后代，子选择器用>仅选直接子元素。例如.parent .child作用于任意嵌套层级，而.parent > .child只作用于第一层子元素，如HTML中.child不在.parent直接子级则不生效，因此>更精确避免样式污染，空格更宽泛适用于跨层级统一设置。
区别_层级关系与选择规则详解">
在CSS中，空格和>符号都用于表示元素之间的层级关系，但它们在选择规则上有重要区别。理解这些差异有助于精准控制样式作用范围。
后代选择器：使用空格
当两个选择器之间用空格分隔时，表示“后代选择器”。它会选中指定元素内部的所有匹配的后代元素，无论嵌套多深。
例如：.parent .child { color: red; }
这条规则会选中所有 class为"parent" 的元素内部的、class为"child"的元素，即使".child"是孙子、曾孙层级也会被选中。
立即学习“前端免费学习笔记（深入）”；
说明：只要存在祖先与后代关系即可匹配，不关心中间有多少层嵌套。
子选择器：使用 > 符号
当两个选择器之间使用>时，表示“子选择器”，只选中直接子元素，不会影响更深层的后代。
例如：.parent > .child { color: blue; }
这条规则只会让 .parent 的第一层子元素中 class 为 "child" 的生效。如果 .child 被包裹在另一个 div 中（即不是直接子元素），则不会被选中。
说明：强调父子关系的直接性，跳过间接嵌套。
实际场景对比
假设HTML结构如下：
文本
-
.parent .child：可以选中该元素，因为它是后代 -
.parent > .child：无法选中，因为 .child 不是 .parent 的直接子元素
若想让 > 生效，需将 .child 放在直接子层级：
文本
总结关键区别
空格代表宽泛的后代关系，> 强调严格的父子连接。在编写样式时，若只想影响下一级元素，应使用 > 避免样式污染深层结构；若需要跨层级统一设置，则空格更合适。
基本上就这些，掌握这点能显著提升CSS选择的精确度。
