Question

后代选择器和子选择器的异同

Answer 1

后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。子选择器只对直接后代有影响的选择器，而对“孙子后代”以及多层后代不产生作用。
主要去别是后代选择器使用可以是各种选择器（标记选择器、类别选择器、ID选择器）都可以进行嵌套。而子选择器只作用在子类。
要注意浏览器兼容性：在IE6中，只支持后代选择器，不支持子选择器，而在IE7和FF中既支持后代选择器，又支持子选择器。

Answer 2

子选择器（child
selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器(包含选择器)是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。如图：
子选择器的代码以及效果图：

把.food>li修改为.food
li看一下效果。
后代选择器的代码以及效果图：

来源：慕课网