一：层级选择器 主要有以下几种：
a b: 即选择a中所有的b元素
a>b：既选择 a中 所有处在第一级且属性为b的孩子
a+b：选择 与a相邻的（在a后面）的b元素
a~b：选择 a的且属性为b的兄弟（不包括a）
HTML代码：
1 <input type="button" id="btn1" value="选择body中所有的div元素" /> 2 <input type="button" id="btn2" value="选择body中第一级的孩子" /> 3 <input type="button" id="btn3" value="选择id为two的元素的下一个元素" /> 4 <input type="button" id="btn4" value="选择id为one的所有兄弟元素" /> 5 <hr /> 6 <div id="one"> 7 <div class="mini"> 8 111 9 </div> 10 </div> 11 12 <div id="two"> 13 <div class="mini"> 14 222 15 </div> 16 <div class="mini"> 17 333 18 </div> 19 </div> 20 21 <div id="three"> 22 <div class="mini"> 23 444 24 </div> 25 <div class="mini"> 26 555 27 </div> 28 <div class="mini"> 29 666 30 </div> 31 </div> 32 33 <span id="four"> 34 35 </span>
jQ代码：
1 //定义一个页面加载函数 2 $(function(){ 3 //为按钮1设置点击事件 4 $("#btn1").click(function(){ 5 //注意方法 6 $("body div").css("backgroundColor","pink"); 7 }) 8 $("#btn2").click(function(){ 9 //注意方法 10 $("body>div").css("backgroundColor","pink"); 11 }) 12 $("#btn3").click(function(){ 13 //注意方法 14 $("#two+div").css("backgroundColor","pink"); 15 }) 16 $("#btn4").click(function(){ 17 //注意方法,注意参数,所有指的是包含body内部所有的元素 18 $("#one~*").css("backgroundColor","pink"); 19 }) 20 21 })
CSS代码：
1 div,span,p { 2 width:140px; 3 height:140px; 4 margin:5px; 5 background:#aaa; 6 border:#000 1px solid; 7 float:left; 8 font-size:17px; 9 font-family:Verdana; 10 } 11 div.mini { 12 width:55px; 13 height:55px; 14 background-color: #aaa; 15 font-size:12px; 16 } 17 div.hide { 18 display:none; 19 }