在CSS样式编写过程中，精准控制样式的应用范围是提升页面样式可控性的关键。子元素选择器是CSS中用于选中父元素直接子元素的工具，通过大于号作为连接符，能够避免样式向更深层级的元素扩散，解决很多样式冲突问题。
子元素选择器的基本语法
子元素选择器的语法格式非常简单，由父元素选择器和直接子元素选择器通过>连接组成，具体结构如下：
/* 语法结构 */
父元素选择器 > 直接子元素选择器 {
样式属性: 属性值;
}
这里的>两侧可以保留空格，也可以不保留，不过为了代码可读性，通常建议在>两侧各加一个空格。该选择器只会匹配父元素的直接子元素，不会匹配父元素后代中更深层级的元素。
子元素选择器与后代选择器的区别
很多开发者会混淆子元素选择器和后代选择器，两者的核心差异在于选择范围不同：
- 后代选择器使用空格连接，会选中父元素下所有层级的后代元素，不管嵌套多深都会被匹配到
- 子元素选择器使用
>连接，只会选中父元素的直接第一层子元素，更深层级的元素不会被选中
我们可以通过一个具体的例子来直观对比两者的差异：
<div class="container">
<p class="text">第一层段落</p>
<div class="inner">
<p class="text">第二层段落</p>
</div>
</div>
如果分别使用两种选择器设置样式：
/* 后代选择器：所有class为text的元素都会变红 */
.container .text {
color: red;
}
/* 子元素选择器：只有第一层class为text的元素变蓝 */
.container > .text {
color: blue;
}
上述代码中，后代选择器会让两个段落都变成红色，而子元素选择器只会让第一层的段落变成蓝色，第二层的段落不会受到影响。
子元素选择器的常见使用场景
1. 导航菜单样式控制
在编写导航菜单时，我们通常只需要给第一层的菜单项设置样式，二级菜单需要单独设置，这时候子元素选择器就非常适用：
<ul class="nav">
<li>首页</li>
<li>产品
<ul class="sub-nav">
<li>产品A</li>
<li>产品B</li>
</ul>
</li>
<li>关于我们</li>
</ul>
/* 只给一级导航项设置水平排列和间距 */
.nav > li {
display: inline-block;
margin-right: 20px;
padding: 10px 15px;
background-color: #f5f5f5;
}
/* 二级导航单独设置垂直排列样式 */
.sub-nav > li {
display: block;
margin-right: 0;
padding: 8px 15px;
}
2. 列表容器直接子项样式设置
当列表容器中嵌套了其他列表时，使用子元素选择器可以避免样式污染：
/* 只给ul的直接子元素li设置左边距 */
ul > li {
margin-left: 20px;
list-style-type: disc;
}
/* 嵌套的ul下的li单独设置样式 */
ul ul > li {
list-style-type: circle;
}
使用注意事项
- 子元素选择器只能选择直接子元素，不能跨层级选择，如果需要选择更深层级的元素，需要逐层使用
>连接，或者使用后代选择器 - 如果父元素选择器和子元素选择器之间没有直接的父子关系，该选择器不会匹配到任何元素
- 子元素选择器的兼容性很好，所有主流浏览器都支持，包括IE7及以上版本，可以放心使用
掌握子元素选择器的用法，能够让我们在编写CSS时更精准地控制样式的作用范围，减少不必要的样式覆盖和冲突，提升样式代码的可维护性。在实际开发中，根据需求合理选择子元素选择器或者后代选择器，能够让我们的样式逻辑更清晰。