層次選擇器，就是通過元素之間的層次關系來獲取元素。層次選擇器在實際開發中，也是相當重要的。常見的層次關系包括：父子、後代、兄弟、相鄰。
在jQuery，層次選擇器共有4種：
注意以下2點：
（1）$("M+N")可以使用“$(M元素).next()”代替；
（2）$("M~N")可以使用“$(M元素).nextAll()”代替；
關於next()和nextAll()這兩種方法，我們在“jQuery查找方法”這一章的“向後查找兄弟元素”中會詳細分析，小伙伴們暫時不需要深入了解。
後代選擇器，就是選擇元素內部中所有的某一個元素，包括子元素和其他後代元素。
語法：
$("M N")
說明：
在後代選擇器中，“M元素”和“N元素”之間用空格隔開，表示選中M元素內部後代N元素（所有N元素）。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#first p").css("color","red");
})
</script>
</head>
<body>
<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元素，因此不管是子元素，還是其他後代元素，統統都被選中。
子代選擇器，就是選中元素內部的某一個子元素。子代選擇器跟後代選擇器很相似，但是卻有著明顯的區別：
（1）後代選擇器，選取的是元素內部所有的元素（包括子元素）；
（2）子代選擇器，選取的是元素內部某一個子元素（只限子元素）；
語法：
$("M>N")
說明：
在子代選擇器中，“M元素”和“N元素”之間使用“>”選擇符，表示選中M元素內部的子元素N。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#first>p").css("color","red");
})
</script>
</head>
<body>
<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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#second~p").css("color","red");
})
</script>
</head>
<body>
<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。記住，兄弟選擇器只選取後面的所有兄弟元素，不包括前面的所有兄弟元素。如果我們想要只選取前面所有的兄弟元素，可以使用prevAll()方法來選取。prevAll()方法我們在後面的“向前查找兄弟元素”這一節會詳細給大家講解。
相鄰選擇器，就是選中元素後面（不包括前面）的某一個“相鄰”的兄弟元素。相鄰選擇器跟兄弟選擇器也非常相似，不過也有明顯的區別：
（1）兄弟選擇器選取元素後面“所有”的某一類元素；
（2）相鄰選擇器選取元素後面“相鄰”的某一個元素；
語法：
$("M+N")
說明：
在相鄰選擇器中，“M元素”和“N元素”之間使用“+”選擇符，表示選中M元素後面的某一個相鄰的兄弟元素N。
舉例1：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#second+p").css("color","red");
})
</script>
</head>
<body>
<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。
舉例2：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默認的padding和margin*/
*{padding:0;margin:0}
/*去除列表項默認符號*/
ul{list-style-type:none;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("li+li").css("border-top", "2px solid red");
})
</script>
</head>
<body>
<ul>
<li>第1個元素</li>
<li>第2個元素</li>
<li>第3個元素</li>
<li>第4個元素</li>
<li>第5個元素</li>
<li>第6個元素</li>
</ul>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("li+li")使用的是相鄰選擇器，表示“選擇li元素相鄰的下一個li元素”。由於最後一個li元素沒有相鄰的下一個li元素，所以對於最後一個li元素，它是沒有下一個li元素可以選取的。$("li+li").css("border-top", "2px solid red")達到在兩兩li元素之間添加一個邊框的效果。這是一個非常棒的技巧，在實際開發中如果我們想要在兩兩元素之間實現什麼效果，我們經常會用到這個技巧！大家請一定不要浪費這個強大的技巧！
例如我們 學習網這一個底部信息欄就可以用這個技巧來實現，大家可以嘗試自己實現一下：
總結
在這一節，其實我們主要講解的是2組選擇器：
這樣劃分就一目了然了。大家可以根據這個劃分，深入對比，更能加深理解和記憶。