层次选择器，就是通过元素之间的层次关系来选择元素。层次选择器在实际开发中，也是相当重要的。常见的层次关系包括：父子、后代、兄弟、相邻。
在jQuery中，层次选择器共有4种，如下表所示。
jQuery层次选择器-
（1）
("M N")可以使用(M).find(N)代替 -
（2）
("M>N")可以使用(M).children(N)代替 -
（3）
("M~N")可以使用(M).nextAll(N)代替 -
（4）
("M+N")可以使用(M).next(N)代替
对于find()、children()、nextAll()、next()这4种方法，我们在后面“第10章 查找元素”中会详细介绍，这里简单了解一下即可。
一、后代选择器
后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素。
$("M N")
在后代选择器中，“M元素”和“N元素”之间用空格隔开，表示选中M元素内部的后代N元素（即所有N元素）。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#first p").css("color","red");
</script>
</head>
<div id="first">
<p>lvye的子元素</p>
<p>lvye的子元素</p>
<div id="second">
<p>lvye子元素的子元素</p>
<p>lvye子元素的子元素</p>
</div>
<p>lvye的子元素</p>
<p>lvye的子元素</p>
</div>
</body>
</html>
浏览器预览效果如图所示。
$("#first p")表示选取id="first"的元素内部的所有p元素，因此不管是子元素，还是其他后代元素，全部都会被选中。
二、子代选择器
子代选择器，就是选中元素内部的某一种子元素。子代选择器跟后代选择器很相似，但是却有着明显的区别。
$("M>N")
在子代选择器中，“M元素”和“N元素”之间使用“>”选择符，表示选中M元素内部的子元素N。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#first>p").css("color","red");
</script>
</head>
<div id="first">
<p>lvye的子元素</p>
<p>lvye的子元素</p>
<div id="second">
<p>lvye子元素的子元素</p>
<p>lvye子元素的子元素</p>
</div>
<p>lvye的子元素</p>
<p>lvye的子元素</p>
</div>
</body>
</html>
浏览器预览效果如图所示。
$("#first>p")表示选中id="first"的元素下的子元素p。我们将这个例子与后代选择器的例子对比一下，就可以很清楚地知道：子代选择器只选取子元素，不包括其他后代元素。
三、兄弟选择器
兄弟选择器，就是选中元素后面（不包括前面）的某一类兄弟元素。
$("M~N")
在兄弟选择器中，“M元素”和“N元素”之间使用“~”选择符，表示选中M元素后面的所有某一类兄弟元素N。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#second~p").css("color","red");
</script>
</head>
<div id="first">
<p>lvye的子元素</p>
<p>lvye的子元素</p>
<div id="second">
<p>lvye子元素的子元素</p>
<p>lvye子元素的子元素</p>
</div>
<p>lvye的子元素</p>
<p>lvye的子元素</p>
</div>
</body>
</html>
浏览器预览效果如图所示。
$("#second~p")表示选取id="second"的元素后面的所有兄弟元素p。记住，兄弟选择器只选取后面的所有兄弟元素，不包括前面的所有兄弟元素。
四、相邻选择器
相邻选择器，就是选中元素后面（不包括前面）的某一个“相邻”的兄弟元素。相邻选择器跟兄弟选择器也非常相似，不过也有明显的区别。
- （1）兄弟选择器选取元素后面“所有”的某一类元素。
- （2）相邻选择器选取元素后面“相邻”的某一个元素。
$("M+N")
在相邻选择器中，“M元素”和“N元素”之间使用“+”选择符，表示选中M元素后面的某一个相邻的兄弟元素N。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#second+p").css("color","red");
</script>
</head>
<div id="first">
<p>lvye的子元素</p>
<p>lvye的子元素</p>
<div id="second">
<p>lvye子元素的子元素</p>
<p>lvye子元素的子元素</p>
</div>
<p>lvye的子元素</p>
<p>lvye的子元素</p>
</div>
</body>
</html>
浏览器预览效果如图所示。
$("#second+p")表示选取id="second"的元素后面的“相邻”的兄弟元素p。
<!DOCTYPE html>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("li+li").css("border-top", "2px solid red");
</script>
</head>
<li>第1个元素</li>
<li>第2个元素</li>
<li>第3个元素</li>
<li>第4个元素</li>
<li>第5个元素</li>
</body>
</html>
浏览器预览效果如图所示。
("li+li")使用的是相邻选择器，表示“选择li元素相邻的下一个li元素”。由于最后一个li元素没有相邻的下一个li元素，所以对于最后一个li元素，它是没有下一个li元素可以选取的。("li+li").css("border-top", "2px solid red")达到在两两li元素之间添加一个边框的效果。
这是一个非常棒的技巧，在实际开发中如果我们想要在两两元素之间实现什么效果（border、margin等），我们会经常用到这个技巧！大家一定要重点掌握。例如下图所示的底部信息栏就可以用这个技巧来实现，大家可以尝试自己实现一下。
在这一节，其实我们主要讲解的是两组选择器。
- （1）后代选择器和子代选择器
- （2）兄弟选择器和相邻选择器
这样划分就一目了然了。大家可以根据这个划分，深入对比，然后多次实践，这样才能加深理解和记忆。
本站所有教程均为原创，大部分已由人民邮电出版社出版成书。禁止转载和抄袭，否则绿叶学习网和人民邮电出版社必将追究法律责任，附录：互联网著作权行政保护法（法律顾问：张俊律师）
2.2 基本选择器
请不要重复点赞喔