1.父子级选择器
jQuery("parent>child")
parent:任何有效的选择器
child:用于过滤子元素的选择器(只能选择下一级,如a>b>c)
1 <ul class="topnav"> 2 <li>Item 1</li> 3 <li>Item 2 4 <ul> 5 <li>Nested item 1</li> 6 <li>Nested item 2</li> 7 <li>Nested item 3</li> 8 </ul> 9 </li> 10 <li>Item 3</li> 11 </ul> 12 13 <script> 14 $("ul.topnav > li").css("border", "3px double red"); 15 </script>
2.后代选择器
jQuery("ancestor descendant")
ancestor:任何有效的选择器。
descendant:用于过滤后代元素的选择器。
一个元素的后代可以是该元素的子代,孙代,曾孙代,等等。
1 <form> 2 <div>Form is surrounded by the green border.</div> 3 <label for="name">Child of form:</label> 4 <input name="name" id="name"> 5 <fieldset> 6 <label for="newsletter">Grandchild of form, child of fieldset:</label> 7 <input name="newsletter" id="newsletter"> 8 </fieldset> 9 </form> 10 11 <script> 12 $( "form input" ).css( "border", "2px dotted blue" ); 13 $( "form fieldset input" ).css( "backgroundColor", "yellow" ); 14 </script>