<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>层级选择器</title> ???????<link rel="stylesheet" type="text/css" href="../../css/style.css"/> ???????<script src="../../js/jquery-1.8.3.js"></script> ???????<script> ???????????$(function(){ ???????????????$("#btn1").click(function(){ ???????????????????$("body div").css("background-color","gold"); ???????????????}); ???????????????????????????????$("#btn2").click(function(){ ???????????????????$("body>div").css("background-color","gold"); ???????????????}) ???????????????????????????????$("#btn3").click(function(){ ???????????????????$("#two+div").css("background-color","gold"); ???????????????}) ???????????????????????????????$("#btn4").click(function(){ ???????????????????$("#one~div").css("background-color","gold"); ???????????????}); ???????????}) ???????</script> ???????????????????</head> ???<body> ???????<input type="button" id="btn1" value="选择body中的所有的div元素"/> ???????<input type="button" id="btn2" value="选择body中的第一级的孩子"/> ???????<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/> ???????<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/> ???????????????<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;}Jquery操作层级选择器
原文地址：https://www.cnblogs.com/benjamin77/p/9162323.html