如果想要通過DOM元素之間的層次關系來獲取特點的元素，如后代元素、子元素、相鄰元素和同輩元素等，那個層次選擇器是一個非常好的選擇。
在介紹層次選擇器之前，我們先在html中寫下如下代碼，后面所有的操作均在此基礎之上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.js"></script> <script></script> </head> <body> <h2>層次選擇器</h2> <div id="orange"> <span>北京</span> <p> <span class="pear">昌平</span> </p> <span>天津</span> </div> <span>河北</span> <span>遼寧</span> <div> <span>濟南</span> <div><span>青島</span></div> </div> <span>吉林</span> <span>黑龍江</span> </body> </html>
1、派生選擇器
用於選擇父級下所有的派生子級
$(function(){
$("div span").css("color","red")
})
上面的效果可以用如下的JavaScript代碼實現：
window.onload = function(){ Array.prototype.forEach.call(document.querySelectorAll('div span'),function(item,index,arr){ item.style.color = 'red'; }); }
2、父子級選擇器
在給定的父元素下匹配所有[子元素]直接子元素
$(function(){ $("div > span").css("color",'#00ffff') })
和上面派生選擇器不同，父子級選擇器只會匹配直接的子級，而不再匹配孫子級的元素，上面的效果用下面的JavaScript也可以實現：
window.onload = function(){ Array.prototype.forEach.call(document.querySelectorAll('div > span'),function(item,index,arr){ item.style.color = '#00ffff'; }); }
3、prev + next
匹配[緊接]在 所有prev 元素后的 next(下一個) 元素。
$(function(){ $("div + span").css("color","pink"); })
也可以使用next()方法來替代上面的方法
$(function(){ $("div").next("span").css("color","pink"); })
這個方法是匹配每個div后面的第一個同輩span，對於后面有多個span的，只會匹配第一個。用下面的JavaScript代碼也可以實現上面的效果。
window.onload = function(){ Array.prototype.forEach.call(document.querySelectorAll('div + span'),function(item,index,arr){ item.style.color = 'pink'; }); }
4、prev ~ siblings
匹配 prev 元素之后的所有 siblings 元素。
$(function(){ $("#orange ~ span").css("color",'#0000CD'); })
同上一個方法一樣，該方法也有一個類似的替代方法nextAll()。
$(function(){ $("#orange").nextAll("span").css("color",'#0000CD'); })
上一個方法是匹配div后面的第一同輩span，該方法匹配的也是div同輩的span，但是匹配的是后面所有的同輩，而不僅限於一個。用下面的JavaScript代碼也可以實現上面的效果。
window.onload = function(){ Array.prototype.forEach.call(document.querySelectorAll('div ~ span'),function(item,index,arr){ item.style.color = '#0000CD'; }); }
5、siblings
匹配所有的同輩元素。
$(function(){ $('#orange').siblings('span').css('color','orange'); })
該方法同前面的兩個方法都不同，不再只是匹配后面的同輩元素，而是直接匹配所有的同輩元素，不論前后。