使用子选择器（>）可选中父元素的直接子元素，如.container > p {color: red;}仅使“第一层段落”变红，嵌套段落不受影响，适用于导航、表格等需精确控制层级的场景。
在CSS中，选择直接子元素使用子选择器（Child Selector），也就是用大于号 > 连接两个选择器。它只会选中指定父元素的直接子元素，不会影响更深层的后代元素。
parent > child { 样式规则 }
其中：
假设HTML结构如下：
<div class="container">如果只想给 .container 的直接子 p 设置样式，可以这样写：
立即学习“前端免费学习笔记（深入）”；
.container > p {结果：只有“第一层段落”变成红色，“嵌套的段落”不受影响，因为它不是 .container 的直接子元素。
子选择器特别适合用于精确控制层级，避免样式污染。比如：
nav > ul > li
table > tbody > tr
以上就是如何通过css选择直接子元素的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
592
收藏
