理论部分

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

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

 

有如下代码：

1 
     
      2     
      
1111
3     
      22224 
     

代码分析

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设置如下验证：

1 div>a{2     color: red;3 }

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

 

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

后代选择器 div a

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

CSS设置如下验证：

div a{
        color:red;  }

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

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