<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11.5jQuery选择器之层级选择器</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
//1.子选择器
//$('parent > child')
//2.后代选择器
//$('ancestor descendant')
//3.相邻兄弟选择器
//$('prev + next')
//4.一般兄弟选择器
//$('prev ~ siblings')
</script>
</head>
<body>
<h2>子选择器与后代选择器</h2>
<div class="layer1">
<p>layer1的孩子p1</p>
<p>layer1的孩子p2</p>
<div class="layer2">layer1的孩子3
<p>layer2的孩子1也就是layer1的孙子1</p>
<p>layer2的孩子2也就是layer1的孙子2</p>
</div>
</div>
<script>
//后代选择器
$('.layer1 p').css('background-color','#ccc');
//子选择器
$('.layer1>p').css('border','solid 2px red');
$('.layer1>p').css('border-radius','4px');
</script>
<h2>一般兄弟选择器和相邻兄弟选择器</h2>
<span class="brother">span的兄弟</span>
<div>span的相邻兄弟div1</div>
<span>span的兄弟span1</span>
<div>span的一般兄弟div2</div>
<div>span的一般兄弟div3</div>
<script>
//一般兄弟选择器
$('.brother~div').css('border','solid 2px green');
//相邻兄弟选择器
$('.brother+div').css('border-radius','4px');
$('.brother+div').css('background-color','#CCC');
</script>
</body>
</html>
