文字样式没有子代和后代之分？
如果我写 .food li {color:red;} 就是food类下面所有li的标签都为红色，这是后代选择器
如果我写.food >li{color:red;}按理是food类第一代li标签为红色，可是居然第二代也变红色了，
这是什么原理?
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
