层次选择器

html
<div class="one" id="one">
  id为one,class为one的div
   <div class="mini">class为mini的div</div>
 </div>
 
 <div class="one" id="two" title="test">
  id为two,class为one,title为test的div
   <div class="mini" title="other" > class为mini,title为other的div</div>
   <div class="mini" title="test" > class为mini,title为testsd的div</div>
 </div>
 
 <div class="one">
   <div class="mini">class为mini </div>
   <div class="mini">class为mini </div>
   <div class="mini">class为mini </div>
    <div class="mini"></div>
 </div>

 <div class="one">
   <div class="mini">class为mini </div>
   <div class="mini">class为mini </div>
   <div class="mini">class为mini </div>
   <div class="mini" title="tesst">class为mini,title为tesst </div>
 </div>

 <div style="display:none" class="none">style的display为none的div</div>

 <div class="hide">class为hide的div</div>

 <div>包含input的hidden的div<input type="hidden" size="8" /></div>

 <span id="mover">正在执行动画的span元素</span>

样式：

div,span,p{
   width:140px;
   height:140px;
   margin:5px;
   background:#aaa;
   border:#000 1px solid;
   float:left;
   font-size:17px;
   font-family:Verdana;
    
   }

div.mini
{
    width:55px;
    height:55px;
    background-color:#aaa;
    font-size:12px;
    }

div.hide
{
    display:none;}

后代选择器： 前元素是祖元素，后元素是其后代；

$("body div").css("background", "#bbffaa");

等价于：

$("body ").find("div").css("background", "#bbffaa");

展示如图：

子元素：该元素对应的第一层元素；

 $("body > div").css("background", "#bbffaa");

等价于：

$("body ").chidren("div").css("background", "#bbffaa");

相邻元素：该元素后面的一个同级元素；

 $(".one + div").css("background","#bbffaa");

同辈元素：跟当前元素是一个层级的元素
该元素后面的同级元素：

$("#two~ div").css("background", "#bbffaa");

等价于$("#two").nextall("div").css("background", "#bbffaa");

该元素的所有同辈元素：除当前元素的所有同级元素

 $("#two").siblings("div").css("background", "#bbffaa");