直接子元素选择器通过“>”符号精准控制父元素的直接子级，如.parent > p { color: red; }仅作用于第一层p标签。其核心应用场景包括：1.导航栏中仅对顶层li设置样式；2.精确控制表格第一层tr或td；使用时需注意层级关系严格匹配，连续使用多个“>”可精确定位，且不可与空格后代选择器混淆。
在网页布局中，我们经常需要精准控制某个元素的直接子元素，而不是它的所有后代元素。这时候就需要用到CSS中的直接子元素选择器（也叫“子代选择器”）。它能让你只选中某一个父元素下的直接子级，而不影响更深嵌套的元素。
什么是直接子元素？
在HTML结构中，如果一个元素A里面直接包含了另一个元素B，并且中间没有其他标签隔开，那B就是A的直接子元素。
举个例子：
立即学习“前端免费学习笔记（深入）”；
<div class="parent">
<p>我是直接子元素</p>
<span>
<p>我不是直接子元素</p>
</span>
</div>上面这段代码里，第一个<p></p>是.parent的直接子元素，而第二个<p></p>不是，因为它被包裹在了一个<span></span>里面。
如何使用CSS选择直接子元素？
要选择直接子元素，使用 大于号 > 这个符号。
语法如下：
父元素 > 子元素 {}例如：
.parent > p {
color: red;
}这个样式只会作用于.parent下面的第一层p标签，不会影响嵌套更深的p。
常见应用场景
1. 导航栏样式控制
在导航栏结构中，通常会有多级菜单，但你只想给一级菜单加样式。
HTML结构可能是这样的：
<ul class="nav">
<li>首页</li>
<li>
产品
<ul>
<li>产品A</li>
<li>产品B</li>
</ul>
</li>
</ul>如果你想只给顶层的li设置边距或背景色，可以这样写：
.nav > li {
margin-right: 20px;
}这样就不会影响下拉菜单里的li。
2. 控制表格样式
有时候你需要对表格的第一层tr或td进行样式设置，避免影响嵌套表格。
table > tbody > tr > td {
border: 1px solid #ccc;
}这种写法可以更精确地定位目标单元格。
使用技巧与注意事项
-
层级关系要准确：
>只能匹配一层子元素，不能跨级。 -
可连续使用多个
>：比如.box > ul > li > a可以非常精确地定位某个链接。 -
不要和后代选择器混淆：普通的空格选择器（如
.box a）会选择所有后代中的a标签，而.box > a只选直接子元素。
举个小例子对比一下：
.box a {} /* 所有后代中的 a */
.box > a {} /* 只有一层的 a */如果你发现样式没生效，先检查HTML结构是否符合你的选择器要求。
小结
直接子元素选择器是一个非常实用的小工具，在处理嵌套结构时尤其有用。掌握好>的使用，不仅能减少不必要的样式干扰，还能让CSS更清晰、更高效。
基本上就这些，不复杂但容易忽略细节的地方在于：结构层级必须严格匹配。
