<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>层级选择器</title><link rel="stylesheet" href="../../css/style.css" type="text/css"/><script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script><script>$(function(){$("#btn1").click(function(){$("body div:first").css("background-color","red");})$("#btn2").click(function(){$("body div:last").css("background-color","red");})$("#btn3").click(function(){$("body div:odd").css("background-color","red");})$("#btn4").click(function(){$("body div:even").css("background-color","red");})});</script></head><body><input type="button" id="btn1" value="body中的第一个div元素"/><input type="button" id="btn2" value="body中的最后一个div元素"/><input type="button" id="btn3" value="选择body中的奇数的div"/><input type="button" id="btn4" value="选择body中的偶数的div"/><hr/><div id="one"><div class="mini">111</div></div><div id="two"><div class="mini">222</div><div class="mini">333</div></div><div id="three"><div class="mini">444</div><div class="mini">555</div><div class="mini">666</div></div><span id="four"></span></body> </html>
style.css
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} form div { margin:5px 0;} .int label { float:left; width:100px; text-align:right;} .int input { padding:1px 1px; border:1px solid #ccc;height:16px;} .sub { padding-left:100px;} .sub input { margin-right:10px; } .formtips{width: 200px;margin:2px;padding:2px;} .onError{background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;padding-left:25px; } .onSuccess{background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;padding-left:25px; } .high{color:red; }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;}table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} .even { background:#FFF38F;} /* 偶数行样式*/ .odd { background:#FFFFEE;} /* 奇数行样式*/ .selected { background:#FF6500;color:#fff;}
