.food>li{border:1px solid red;}
为什么实现后只有两个框？将.food后>改为空格后会多很多框
>只针对food亲生的 空格相当于针对food下面的所有子孙
.food>li{}使用的是子代选择器，选中的是.food中的第一级li标签；而.food li{}是后代选择器，会选中.food下的所有li标签，这就是两者的区别，希望可以帮到你。