17370845950

使用子选择器（>）可选中父元素的直接子元素，如.container > p {color: red;}仅使“第一层段落”变红，嵌套段落不受影响，适用于导航、表格等需精确控制层级的场景。

在CSS中，选择直接子元素使用子选择器（Child Selector），也就是用大于号 > 连接两个选择器。它只会选中指定父元素的直接子元素，不会影响更深层的后代元素。

语法格式

parent > child { 样式规则 }

其中：

• parent 是父元素
• child 是直接子元素（只限一级嵌套）

实际例子

假设HTML结构如下：

  

第一层段落

  

    

嵌套的段落

  

如果只想给 .container 的直接子 p 设置样式，可以这样写：

.container > p {
  color: red;
}

结果：只有“第一层段落”变成红色，“嵌套的段落”不受影响，因为它不是 .container 的直接子元素。

常见应用场景

子选择器特别适合用于精确控制层级，避免样式污染。比如：

• 导航菜单中只对一级菜单项设置样式：nav > ul > li
• 表格中只针对直接子行设置背景：table > tbody > tr
• 组件封装时防止内部嵌套元素误匹配

基本上就这些，关键在于理解“直接子元素”是指父子关系，不跨代。用 > 能帮你精准锁定这一层。