在CSS样式编写过程中，精准控制选择器的作用范围是保证样式符合预期的关键。如果只想选中某个父元素的直接子元素，而不影响更深层的孙级、曾孙级元素，就需要使用CSS的子选择器来实现。
什么是CSS子选择器
CSS子选择器是专门用于匹配父元素的直接子元素的选择器，它的语法符号是>，书写格式为父元素选择器 > 直接子元素选择器，其中>两侧可以有空格也可以没有空格，不影响选择效果。
子选择器与后代选择器的区别
很多初学者容易混淆子选择器和后代选择器，两者的核心差异在于作用范围：
- 后代选择器（空格）：会匹配父元素下所有层级的后代元素，不管中间隔了多少层
- 子选择器（>）：只会匹配父元素的下一级直接子元素，不会继续向下匹配
对比示例
我们先准备一段HTML结构用于测试：
<div class="parent">
<p class="child">直接子元素p</p>
<div class="child">
<p class="grandson">孙级元素p</p>
</div>
</div>
如果使用后代选择器编写样式：
/* 后代选择器，会选中所有class为parent下的p元素 */
.parent p {
color: red;
}
这段样式会把直接子元素p和孙级元素p都设置为红色，因为两者都是parent的后代元素。
如果换成子选择器：
/* 子选择器，只选中parent的直接子元素p */
.parent > p {
color: red;
}
这次只有直接子元素p会变成红色，孙级元素p不会受影响，因为孙级p不是parent的直接子元素。
子选择器的常见使用场景
1. 导航菜单样式控制
多级导航菜单中，通常只想给一级菜单项加特定样式，避免二级、三级菜单继承样式：
<ul class="nav">
<li class="nav-item">首页
<ul class="sub-nav">
<li class="nav-item">子菜单1</li>
<li class="nav-item">子菜单2</li>
</ul>
</li>
<li class="nav-item">关于我们</li>
</ul>
/* 只给一级导航项加右边框 */
.nav > .nav-item {
border-right: 1px solid #ccc;
padding: 0 15px;
}
/* 子菜单项不继承右边框 */
2. 列表项直接子元素样式
当列表项内部还有其他嵌套列表时，避免样式传递到嵌套列表中：
/* 只给ul的直接子元素li加下边距 */
ul > li {
margin-bottom: 10px;
}
使用子选择器的注意事项
- 子选择器只能匹配直接子元素，不能跳过层级，比如父元素>孙元素是无法匹配到目标的
- 子选择器的兼容性很好，支持所有主流浏览器，包括IE7及以上版本，无需担心兼容问题
- 如果父元素下没有符合的直接子元素，子选择器不会生效，也不会报错
- 可以结合其他选择器一起使用，比如
.box > .active > span，表示选中class为box的元素下，直接子元素中class为active的元素里的span元素
总结
CSS子选择器是精准控制样式作用范围的重要工具，通过>符号可以快速选中父元素的直接子元素，避免误选更深层级的元素。在实际开发中，合理运用子选择器可以减少样式冲突，提升CSS代码的可维护性，建议在处理嵌套结构样式时优先考虑使用子选择器来限制选择范围。