<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css; disc">
.food>ul{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p
class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<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>
</body>
</html>因为你用子选择器这个大于号时，样式指定的是food类直属的元素，li是直属元素所以会改变，但这里面ul是从属于li之下的元素，直属于li，不是直属于food类，就不会在>命令下改变。而用空格则指定给了所有在这个类范围内的子标签，即使是间接的。所以ul这时会被改变。
其实欧洲封建制度跟>的方式很像，我的附庸的附庸不是我的附庸。。而中国集权制度跟空格的方式很像，我手下的手下都是我的手下
首先把 第六行把 ；disc 去掉就行了
其次 因为首个ul元素在body程序中不是food函数的子代元素，可以理解为并列元素，li才是，而除掉首个的ul元素才是子代元素，因此在你将>改为空格键后才会显示
>表示为子选择器，只能选择指定父元素的第一代子元素了，在这里，第一个UL为父元素，而父元素的第一代子元素里没有UL子元素，所以会没有反应，你将>号换成了空格，这个时候就变成了后代选择器，后代选择器可选择指定元素下的所有后代元素！
(空格)：包含选择器 >:子选择器
>作用于元素的第一代后代，空格作用于元素的所有后代。