</head>
<body>
<!--层次选择器:
后代选择器 ancestor descendant
子代选择器 parent > child
相邻选择器 prev + next
同辈选择器 prev ~ sibling
-->
<div id="parent">层次选择器
<div id="child" class="testcolor">父选择器
<div class="g">一言通天</div>
<div class="g">天鬼大法</div>
<div class="g">六脉全开</div>
</div>
<div id="">
他兄弟
</div>
</div>
</body>
<script type="text/javascript">
console.log(">=--------后代选择器------->");
//后代选择器
var div1 = $('#parent .g');
div1.each(function(){
console.log(this);
});
console.log(">=--------子代选择器------->");
//子代选择器
var div2 = $('#parent > #child');
div2.each(function(){
console.log(this);
});
console.log(">=--------相邻选择器------->");
//相邻选择器 prev + next
var div3 = $('#child + div ');
div3.each(function(){
console.log(this);
});
console.log(">=--------同辈选择器------->");
//同辈选择器 prev ~ sibling
var div4 = $('.g ~ div');
div4.each(function(){
console.log(this);
});
</script>