jQuery选择器之子元素选择器详解

当我们想要选中某个元素的子元素时，就可以使用子元素选择器。子元素选择器用于选择指定元素的子元素，语法格式如下：

parent > child

其中，parent表示待选中的父元素，child表示待选中的子元素。

例如，下面的代码会选中id为parent的元素中所有h2标签的子元素：

<div id="parent">
  <h1>父级标题</h1>
  <h2>子级标题1</h2>
  <p>子级内容1</p>
  <h2>子级标题2</h2>
  <p>子级内容2</p>
</div>

<script>
  $("#parent > h2").css("color", "red");
</script>

在上面的代码中，$("#parent > h2")中的>就是子元素选择器，表示选中id为parent的元素中所有h2标签的子元素。然后使用css()方法将字体颜色设置为红色。

以下是一个更加复杂的示例：

<div class="wrapper">
  <div class="parent">
    <h2>父级标题</h2>
    <div class="child-wrapper">
      <h3>子级标题1</h3>
      <p>子级内容1</p>
    </div>
    <div class="child-wrapper">
      <h3>子级标题2</h3>
      <p>子级内容2</p>
    </div>
  </div>
  <div class="parent">
    <h2>父级标题</h2>
    <div class="child-wrapper">
      <h3>子级标题1</h3>
      <p>子级内容1</p>
    </div>
    <div class="child-wrapper">
      <h3>子级标题2</h3>
      <p>子级内容2</p>
    </div>
  </div>
</div>

<script>
  $(".parent > .child-wrapper > p").css("color", "blue");
</script>

在示例代码中，我们选中了所有.parent类元素中的.child-wrapper子元素中所有p标签的子元素，将它们的字体颜色设置为蓝色。通过这个复杂的示例，可以看出，在使用子元素选择器时，可以任意嵌套多个元素，只要它们满足父子关系，都可以使用子元素选择器进行选中操作。