.food>li就是一个人在自己子女中选择出所有男性 

.food li就是一个人在自己所有后代包括子女孙子曾孙中选择出所有男性

1. <ul class="food">

2.     <li>水果

3.         <ul>

4.             <li>香蕉</li>

5.             <li>苹果</li>

6.             <li>梨</li>

7.         </ul>

8.     </li

当

.food li{border:1px solid red;}

包含所有li的后代就是2为第一代，4、5、6为第二代，那么水果、香蕉、苹果和梨都有红色外框。

.food>li{border:1px solid red;}

只包含第一代就是2，只有水果有红色外框，香蕉、苹果和梨没有红色外框。

这是我的理解。

我觉得应该时这样理解的，food的后代时ul，.food>li它的效果作用于ul(是一个子选择器)。而.food li(是后代选择器)因为ul的后代是li。

ps：你可以先理解一下有序列和无序列表的一些排列布局，再来理解一下这道题。

个人理解：

.foot>li  作为父亲，定义儿子、女儿这一代

.foot li  则不仅定义儿子，女儿，还定义孙子，孙女，重孙，重孙女（所有的后代）。

<foot>
    <div>
        <li>Hello World</li>
    </div>
</foot>

后代选择器生效

foot li {
    color:red;
}

子选择器无效

foot > li {
    color:red;
}

子选择器     符号为 >   >是作用于该元素的第一代后代（而非第一个后代）

包含选择器（后代选择器）   符号为 空格   空格  是作用于该元素的所有后代