层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系主要包括后代、父子、相邻、兄弟关系，
通过其中某类关系可以方便快捷地定位元素，其详细说明如表2-3所示。
| 选择器 | 功能 | 返回值 |
| ancestor descendant | 根据祖先元素匹配所有后代元素 | 元素集合 |
| parent > child | 根据父元素匹配所有子元素 | 元素集合 |
| prev + next | 匹配所有紧接在prev元素后的相邻元素 | 元素集合 |
| prev ~ siblings | 匹配prev元素之后的所有兄弟元素 | 元素集合 |
说明：ancestor descendant 与 parent > child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev + next可以使用.next()代替，而prev ~ siblings可以使用nextAll()代替。
Demo如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>使用jQuery层次选择器</title> 7 <script type="text/javascript" src="../../software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9 body{font-size:12px;text-align:center} 10 div,span{float:left;border:solid 1px #ccc; 11 margin:8px;display:none} 12 .clsFraA{65px;height:65px} 13 .clsFraP{45px;height:45px;background-color:#eee} 14 .clsFraC{25px;height:25px;background-color:#ddd} 15 </style> 16 <script type="text/javascript"> 17 /** 18 $(function(){ // 匹配后代元素 19 $("#divMid").css("display","block"); 20 $("#divMid1").css("display","block"); 21 $("div span").css("display","block"); 22 alert($("div span").size()); 23 }); **/ 24 /** 25 $(function(){ // 匹配子元素 26 $("#divMid").css("display","block"); 27 alert($("div>span").size()); 28 $("div>span").css("display","block"); 29 }); **/ 30 /** 31 $(function(){ // 匹配后面元素 32 //$("#divMid + div").css("display","block"); 33 $("#divMid").next().css("display","block"); 34 }); **/ 35 /** 36 $(function(){ // 匹配后面所有元素 37 //$("#divMid ~ div").css("display","block"); 38 $("#divMid").nextAll().css("display","block"); 39 }); **/ 40 41 $(function(){ // 匹配所有相邻元素 42 $("#divMid").siblings().css("display","block"); 43 }); /** **/ 44 </script> 45 </head> 46 <body> 47 <div class="clsFraA">Left</div> 48 <div class="clsFraA" id="divMid"> 49 <span class="clsFraP" id="Span1">Span1 50 <span class="clsFrac" id="Span2">Span2</span> 51 </span> 52 <span class="clsFraP" id="Span4">Span4</span> 53 </div> 54 <div class="clsFraA" id="divMid1">Right_1 55 <span class="clsFraP" id="Span5">Span5</span></div> 56 <div class="clsFraA">Right_2</div> 57 <span class="clsFrac" id="Span3">Span3</span> 58 </body> 59 </html>