1、第一从符号上来区分
后代选择器：是用空格来分隔开来 例如<h1>一个<span>人</span>的战争</h1> 就是h1 span{}
子代选择器：用特殊符号> 例如 h1>span{}
2、第二从用法上区分
后代选择器
html部分：
<ul class="study">
<li>物理
<ul>
<li>力学</li>
<li>声学</li>
<li>电磁学</li>
</ul>
</li>
<li>数学
<ul>
<li>微积分</li>
<li>概率论</li>
<li>博弈论</li>
</ul>
</li>
</ul>
css部分
//使用子代选择器的效果
.study >li{
border:1px solid red;/*只给物理和数学加一个红色方框*/
}
//使用后代选择器的效果
.study li{
border:1px solid red;/*给物理 力学 声学 电磁学 和数学 微积分 概率论
博弈论都加一个红色方框*/
}
这说明子代是他是单传只给物理和数学就断子绝孙，后代是一代传一代。