css子选择器(>)和后代选择器(空格)的区别

子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素 注意这里指的不是第一个

<style type="text/css">
  /*添加边框样式（粗细为1px， 颜色为红色的实线）只会加在food下的li上 不会给li里面的元素加属性*/
  .food>li{border:1px solid red;}
</style>
<h1>食物</h1>  
<ul class="food">  
    <li>水果  
        <ul>  
            <li>香蕉</li>  
            <li>苹果</li>  
            <li>梨</li>  
        </ul>  
    </li>  
    <li>蔬菜  
        <ul>  
            <li>白菜</li>  
            <li>油菜</li>  
            <li>卷心菜</li>  
        </ul>  
    </li>  
</ul>  

后代选择器，即加入空格,用于选择指定标签元素下的后辈元素。

<style type="text/css">
/*添加边框样式（粗细为1px， 颜色为红色的实线） 会给 food 下所有的li加上属性包括li里面的*/
  .food li{border:1px solid red;}
</style>