jquery 选择 >

jQuery 子元素选择器 (>)

在jQuery中，> 符号用于选择直接子元素，即仅匹配指定父元素下一级的元素，而非所有后代元素。以下是具体用法和示例：

基本语法

$("parent > child")

• parent: 父元素的选择器。
• child: 要选择的直接子元素的选择器。

示例说明

假设有以下HTML结构：

<div class="parent">
  <span>直接子元素（匹配）</span>
  <ul>
    <li>非直接子元素（不匹配）</li>
  </ul>
</div>

选择直接子元素

$(".parent > span").css("color", "red");

• 仅将.parent下的直接<span>子元素文字颜色设为红色，嵌套在<ul>中的<li>不受影响。

对比后代选择器

若使用空格选择所有后代元素：

$(".parent span").css("color", "blue");

• 所有<span>（包括嵌套的）都会被选中，而>仅限第一级。

实际应用场景

• 导航菜单：仅选中一级菜单项，忽略嵌套的子菜单。
• 表格结构：针对<tbody>的直接<tr>进行操作，避免表头或嵌套表格干扰。

注意事项

• 性能优于后代选择器（空格），因搜索范围更精确。
• 不支持跨层级匹配，如需深层嵌套元素，需结合其他选择器或方法。