子选择器与后代选择器的区别

理论部分

子选择器：筛选儿子辈符合要求的元素

后代选择器：筛选后代元素中所有符合要求的元素

 

有如下代码：

<div>
    <p><a class="1">1111</a></p>
    <a class="2">2222</a>
</div>

代码分析

div后辈元素有3个：p、class=1的a，class=2的a

div儿子辈的元素有2个：p、class=2的a

div孙子辈的元素有1个：class=1的a

子选择器 div>a

子选择器选择儿子辈中符合要求的元素，因此这里选择的是class=2的a标签。

CSS设置如下验证：

div>a{
    color: red;
}

在浏览器中运行之后，显示如下：

可以看到字体颜色设置只对class=2的a有效。

后代选择器 div a

后代选择器选择后辈元素中符合要求的，因此孙子辈的a与儿子辈的a都会被选择。

CSS设置如下验证：

div a{
     color:red;  
}

在浏览器运行之后，显示如下：

可以看到字体颜色设置对孙子辈的a以及儿子辈的a都有效。