为什么“ a标记”被归为后代而不是子代？他们看起来像是孩子而不是后代。但是，下面的两行代码以相同的方式影响它们。
<p class="note">
This page was written by
<a href="mailto:[email protected]">[email protected]</a>
<a href="http://www.example.com</a>
</p>
当我使用子选择器时：
p a {
color: green;
}
[a标签为绿色
当我使用后代选择器时：
p > a {
color: green;
}
[a标签为绿色
什么使后代成为后代而让孩子成为孩子？
在这种情况下，p容器内的所有元素都是子代和子代，因此子代和子代组合器将呈现相同的输出。
如果您的HTML看起来像这样：
<p class="note">
This page was written by
<a href="mailto:[email protected]"><span style="color: blue">[email protected]</span></a>
<a href="http://www.example.com</a>
</p>
…那么span元素将是p容器的后代，而不是子代。
想想一个正常的家庭。父母有孩子。他们既是父母的孩子（>）又是后代（）。孩子们便有了孩子。这些是原始父母的后代（），而不是他们的孩子（>）。
换句话说，子元素始终是子元素，但子元素并不总是子元素。
规格参考：
[
E F表示E元素的F元素后代[
E > F表示E元素的F元素子代]
如果使用p a，则样式将应用于所有a元素内的所有p元素。
如果使用p > a，则样式将应用于所有a元素，其中parent为p元素。
例如，如果您有<p> <h1> <a> something </a> </h1> <p>（不要介意该DOM结构）那么a元素不是p > a的目标，而是p a的目标。
您可以阅读更多here。