jQuery选择器

1.父子级选择器

jQuery("parent>child")

parent：任何有效的选择器

child：用于过滤子元素的选择器（只能选择下一级，如a>b>c）

<ul class="topnav">
  <li>Item 1</li>
  <li>Item 2
    <ul>
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

<script>
$( "ul.topnav > li" ).css( "border", "3px double red" );
</script>

2.后代选择器

jQuery("ancestor descendant")

ancestor：任何有效的选择器。

descendant：用于过滤后代元素的选择器。

一个元素的后代可以是该元素的子代，孙代，曾孙代，等等。

<form>
  <div>Form is surrounded by the green border.</div>

  <label for="name">Child of form:</label>
  <input name="name" id="name">

  <fieldset>
    <label for="newsletter">Grandchild of form, child of fieldset:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
Sibling to form: <input name="none">

<script>
$( "form input" ).css( "border", "2px dotted blue" );
$( "form fieldset input" ).css( "backgroundColor", "yellow" );
</script>