子元素选择器（>）仅选直接子元素，如div > p；后代选择器（空格）选所有层级后代，如div p，匹配更广泛。
子元素选择器和后代选择器在CSS中都用于选择嵌套结构中的元素，但它们的匹配范围和使用方式有明显区别。理解这两者的差异，有助于更精确地控制样式作用范围。
子元素选择器（Child Selector）
子元素选择器使用
>
符号连接两个选择器，表示只选择某元素的
直接子元素
。
例如：
上述规则只会将
div 的直接子级 p 元素
设置为蓝色，如果 p 元素嵌套在 div 内的其他元素中（如 span 或 section 里面），则不会被选中。
立即学习
“
前端免费学习笔记（深入）
”；
关键点：
仅作用于
一级嵌套
不关心更深层的结构
匹配关系更严格
后代选择器（Descendant Selector）
后代选择器通过
空格
分隔两个选择器，表示选择某元素内部的
所有后代元素
，无论嵌套多深。
这条规则会把所有在 div 内部的 p 元素设置为红色，不管 p 是 div 的子元素、孙子元素，还是更深层的后代。
例如以下HTML结构：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
所有三个 p 元素都会应用该样式。
关键区别总结
两者最核心的不同在于
嵌套层级的限制
：
div > p
：只选中 div 的直接子元素 p
div p
：选中 div 内任意层级的 p 元素
如果页面结构复杂，使用子元素选择器可以避免样式“泄露”到不需要的地方，提高样式的精准度。
实际应用场景
假设你只想给导航菜单的一级项加样式，而不影响下拉子菜单：
这样即使 ul 里面有嵌套的 ul 和 li，只有顶层的 li 会被加粗。
而若使用
nav li
，则所有层级的 li 都会加粗，可能不符合设计需求。
基本上就这些。掌握子元素与后代选择器的区别，能让你的CSS更清晰、更可控。
div > p {
color: blue;
}
div p {
color: red;
}
这个会被选中
这个也会被选中
即使嵌套三层，依然被选中
nav > ul > li {
font-weight: bold;
}