直接上代码分析，JS注释有对选择器的描述：
HTML代码：
<div class="wdiv"> <h4>我是外层div</h4> <div class="ndiv"> <h4>我是内层div </h4> <p class="p1">第一行文字</p> <p class="p2">第二行文字</p> <p class="p3">第三行文字</p> <p class="p4">第四行文字</p> <p class="p5">第五行文字</p> <p class="p6">第六行文字</p> <p class="p7">第七行文字</p> <p class="p8">第八行文字</p> </div> </div>JS代码：
<script type="text/javascript"> function select(){ //后代元素选择器，包括儿子代、孙子代、重孙代... //p1元素被置为红色 $(".wdiv .p1").css("background-color","red"); //同上。注意此处选择器的写法：后代要写在前面 $(".p2", ".wdiv").css("background-color","green"); //子代元素选择器，只包括儿子代 //由于选择的是儿子代，所以p3元素的背景色不会改变 $(".wdiv > .p3").css("background-color","pink"); //相邻元素选择器，选择的是相邻的后一个元素 //p4紧挨在p3之后，所以p4元素被置为灰色 $(".p3 + .p4").css("background-color","gray"); //由于p5是在p6的前面，所以p5元素的背景色不会改变 $(".p6 + .p5").css("background-color","gray"); //由于p6不是紧挨在p4之后，所以p6元素的背景色不会改变 $(".p4 + .p6").css("background-color","gray"); //兄弟元素选择器，从后面所有兄弟元素中选择 //p8元素被置为蓝色 $(".p6 ~ .p8").css("background-color","blue"); } </script>结果：
