子元素选择器通过父元素>子元素的语法，如div>p，仅选中直接子元素；与后代选择器（div p）不同，它不作用于深层嵌套元素，常用于精确控制菜单、布局等场景，需注意必须是直接父子关系。
CSS子元素选择器用于选择某个元素的直接子元素，而不是所有后代元素。它使用大于号（>）作为连接符，确保只选中层级结构中下一级的元素。
什么是子元素选择器
子元素选择器通过 父元素 > 子元素 的语法形式，匹配指定父元素下的直接子元素。如果目标元素不是直接子级，即使它是后代，也不会被选中。
例如：div > p 表示选择所有作为 div 元素直接子元素的 p 元素。
与后代选择器的区别
很多人容易混淆子元素选择器和后代选择器。关键区别在于：
立即学习“前端免费学习笔记（深入）”；
- 后代选择器使用空格（如 div p），会选中 div 内部任意层级的 p 元素
- 子元素选择器使用 >（如 div > p），只选中 div 的直接子级 p，不包括更深层的嵌套
这意味着，如果一个 p 元素嵌套在 div 内的另一个 div 或 section 中，div > p 不会选中它，但 div p 会。
实际应用场景
子元素选择器常用于需要精确控制层级样式的场景：
- 导航菜单中只给一级菜单项设置样式：nav > ul > li
- 避免样式污染：只想影响直接子元素，防止深层嵌套元素意外继承样式
- 布局容器中控制直接子块的间距或对齐方式
注意事项
使用子元素选择器时需注意：
- 必须是直接父子关系，中间不能有其他层级
- 支持链式写法，如 header > nav > ul > li，可逐层限定
- 兼容性良好，所有现代浏览器都支持
基本上就这些。掌握子元素选择器有助于写出更精确、更可控的CSS规则。
