注：之前一直不混淆子選擇器和后代選擇器的關系，今天看到一篇文章很不錯，一下子明白了，特此轉載。
通俗的講就是： 兒子一定是后代，但是后代不一定是兒子。
css子元素選擇器和后代選擇器在功能描述上非常相同，但是他們其實是有區別的、
本文章通過兩個簡單的實例向大家介紹子元素選擇器與后代選擇器的區別，需要的朋友可以參考一下。
語法
子元素選擇器的語法如下：
div>ul{color：red；}
子元素選擇器使用大于號">"做為連接符，子元素選擇器只能選擇作為某元素子元素的元素
后代選擇器的語法如下：
h1 em{color:red;}
后代選擇器可以選擇作為某元素后代的元素,父元素與子元素必須用空格隔開，從而表示選中某個元素下的子元素。
二者區別：
我們通過一個實例來講解子選擇器與后代選擇器的區別。
先來看一下后代選擇器div p的效果
<html>
<head>
<style>
div p{ background-color:yellow;}
</style>
</head>
<body>
<div>
<p>子元素選擇器</p>
<span>
<p>后代選擇器</p>
</span>
</div>
</body>
</html>
運行結果如圖：
后代選擇器
再來看一下子選擇器div>p的效果
<html>
<head>
<style>
div > p{ background-color:yellow;}
</style>
</head>
<body>
<div>
<p>子元素選擇器</p>
<span>
<p>后代選擇器</p>
</span>
</div>
</body>
</html>
運行結果如圖：
子選擇器
從上面實例可以看出子選擇器只作用于其第一代元素，而后代選擇器作用于N（N為自然數）代元素。
