[html5入門-14]一探究竟“後代選擇器與子選擇器的區別”
在學習前端開發時，糾結過後代選擇器和子選擇器的區別，現根據目前所學水平蒐集和整理了這兩種選擇器的區別，分享給大家，如有誤導之處，敬請之處。
一．語法上區別
後代選擇器語法：最高代 下一代 ...子代
代與代之間用空格隔開
子選擇器語法：最高代>下一代>...>子代
代與代之間用>隔開
二．作用上區別
後代選擇器：作用在子代和子代所包含的與其相同標籤的所有元素，比如子代是div，那麼子代所包含的所有div標籤都會被作用到；
子選擇器：只作用到子代，子代所包含的所有標籤都不會作用到。
特點：兩種選擇器的使用也與class名有關，當使用各自不同的class名時，都只能作用到當前那一代，此時兩種選擇器作用表現沒有區別。
舉例說明：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #main div{ border: 1px solid blue; } </style> </head> <body> <div id="main"> <div class="div1"> <p class="d1p1">千呼萬喚始出來</p> <div class="d1p2">猶抱琵半遮面</div> </div> <div class="div2"> <p class="d1p1">銀瓶乍破水漿迸</p> <div class="d1p2">鐵騎突出刀槍鳴</div> </div> </div> </body> </html>
這段程式碼最高代是main（不考慮body前提下），它包含了兩個子代div1和div2，每個子代又分別包含一個div和一個p標籤，現在使用後代選擇器#main div{border: 1px solid blue;}給它是設定邊框，效果如下：
可以看出及時作用到了第二代，但是也把第二代裡面的所有div標籤都價邊框了。我們把style裡面的後代選擇器換成子選擇器來看一下效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #main>div{ border: 1px solid blue; } </style> </head> <body> <div id="main"> <div class="div1"> <p class="d1p1">千呼萬喚始出來</p> <div class="d1p2">猶抱琵半遮面</div> </div> <div class="div2"> <p class="d1p1">銀瓶乍破水漿迸</p> <div class="d1p2">鐵騎突出刀槍鳴</div> </div> </div> </body> </html>
可以看出子選擇器只作用到了第二代而沒有繼續作用下去。
說明：有朋友可能會發現，我這裡雖然給第二代的div設定了class，但是這裡並沒有使用，那麼我們使用class名來分別看一下子選擇器和後代選擇器的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main .div1{
border: 1px solid blue;
}
#main>.div2{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">
<p class="d1p1">千呼萬喚始出來</p>
<div class="d1p2">猶抱琵半遮面</div>
</div>
<div class="div2">
<p class="d1p1">銀瓶乍破水漿迸</p>
<div class="d1p2">鐵騎突出刀槍鳴</div>
</div>
</div>
</body>
</html>
可以看出不管是後代選擇器還是子選擇器，當使用class名時只作用到了當前的一層，那麼我把第二代裡面的後代設定一個與其父級相同class名來看看又有什麼效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main .div1{
border: 1px solid blue;
}
#main>.div2{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">
<p class="d1p1">千呼萬喚始出來</p>
<div class="div1">猶抱琵半遮面</div>
</div>
<div class="div2">
<p class="d1p1">銀瓶乍破水漿迸</p>
<div class="div2">鐵騎突出刀槍鳴</div>
</div>
</div>
</body>
</html>把div1設定為後代選擇器，div1的後代設定一個與它相同的class名；把div2設定為子選擇器，也把div2的後代設定一個與它相同的class名。
可以看出後代選擇器繼續向與其相同class名的後代發揮作用，而子選擇器的作用仍舊停留在當前那一代。
從以上例子總結如下：
當選擇器使用標籤名多用後代時，對於後代選擇器，會作用到子代和子代所有與其相同標籤名的子級；對於子選擇器，只作用到子代而不會作用子代任何的子級。
當選擇器使用class名時，對於後代選擇器，會作用到子代和子代所有與其相同class名的子級，如果沒有與其class名相同的子級，則只作用到子代，；對於子選擇器，仍舊只作用到子代而不會作用子代任何的子級。
三．相容性問題
後代選擇器：相容所有瀏覽器
子選擇器：不相容IE6~8瀏覽器