层级选择器的学习，主要包括以下几个部分：
prev+next：选择prev元素下的第一个元素（名称为next），不是prev元素下的所有元素（名称为next的）
prev+siblings：选择prev同一级的所有叫siblings的元素
代码如下：
1 <%@ page language="java" import="java.util.*" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <title>11</title> 7 <script type="text/javascript" src="js/jquery-1.11.0.js"> 8 </script> 9 <script language="javascript"> 10 $(document).ready(function() 11 { 12 alert("欢迎来到层级选择器学习界面"); 13 //*************改变所有div的背景色为#ff00ff******* 14 $("#bt1").click(function() 15 { 16 $("div").css("background","#ff00ff"); 17 }); 18 //*************改变body内所有div的背景色为#ff0001******* 19 $("#bt2").click(function() 20 { 21 $("body>div").css("background","#ff0001");//此处body中div下的div无法变色 22 }); 23 //*************改变id为div1紧接着的div，即div2背景色为#ff00aa******* 24 $("#bt3").click(function() 25 { 26 $("#div1+div").css("background","#ff00aa"); 27 }); 28 //*************改变id为div2紧接着的div，即div3背景色为#ffaaaa******* 29 $("#bt4").click(function() 30 { 31 $("#div1~div").css("background","#ffaaaa"); 32 }); 33 34 }); 35 36 //****************************************************** 37 </script> 38 </head> 39 <body> 40 <input type="button" id="bt1" value="改变所有div的背景色为#ff00ff" ></input> 41 <input type="button" id="bt2" value="body>div 父子关系" ></input> 42 <input type="button" id="bt3" value="#div1+div 前后关系" ></input> 43 <input type="button" id="bt4" value="#div1~div prev同辈的所有sibling元素" ></input> 44 <div id="div1" style="background:grey;border:1px solid;width:20%;height:30%;">div1</div> 45 <div id="div2" style="background:white;border:1px solid;width:20%;height:30%;float:left"> 46 div2 47 <p>p1第一段</p> 48 <p>p2第二段</p> 49 <div id="div2_01" style="background:white;border:1px solid;width:20%;height:30%;float:left">div2_01</div> 50 </div> 51 <div id="div3" style="background:grey;border:1px solid;width:20%;height:30%;float:left">div3</div> 52 <br> 53 </body> 54 </html>