这是对类别下的选择器，给父级一个类（class）在给子级进行选择

 . food ul 这是找到ul

  .food li 这是找到li

  .food ul li 这是找的ul下的li

.food>ul这是可以找的ul但不可以找到li（.food>li)不行

.food ul>li 可以找到li

1. 在类选择器food所在标签下的所有ul标签都会作用，比如.food li{border:1px solid red;}就会将每一个列表都加上红色边框，像下图这样，你可以在子选择器的例子中将子选择器改为后代选择器

   

2. 同上

3. 类选择器food下的ul下的li  ， 比如.food ul li{border:1px solid red;}，效果如下图

   

4. >子选择器表示的是第一代子元素，

   

   上面的第一代子元素是“水果”和“蔬菜”所在的li标签，以“香蕉”、“苹果”、“梨”为一组的ul和以“白菜”、“油菜”、“卷心菜”为一组的ul为第二代子元素，第一代子元素中不包含ul标签所以不显示效果。

5. .food ul>li  这种写法的意思是类选择器food下的所有ul标签下的第一个子元素，比如.food ul>li{border:1px solid red;}

      

   上图中food下的所有ul标签下的第一个子元素为li，ul为第二代子元素，所以有显示边框效果

3，这个的意思就是ul下每一层li里都应用到.food

4，.food>ul是有效果的，不过你要把代码写到他的上一层里去定义，在这个例子里就是{body class="food"}...{/body};有

子选择器作用的是第一代子元素，后代选择器作用于所有后辈元素。

子选择器作用的是第一代子元素，后代选择器作用于所有后辈元素。

一二都比较简单，第三个的意思是作用于ul标签下的li标签，所以”水果“的那个li标签就没有任何效果。

第四个问题，.food>ul之所以没有效果，是因为.food类下面第一代子元素就没有ul这个标签，当然没有效果了，不信可以把那个“水果”的那个li标签删掉，再看效果。.food ul>li是可以的，不言自明

.food ul li这种是找到.food下面的ul，ul下面的所有li