运行结果好像认为li中的li也是ul的儿子啊
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
元素的内容是开始标签与结束标签之间的内容
大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
所以 ul class="food" 的元素内容是li水果和li蔬菜 而li水果的元素内容是另一个ul
子选择器定义的是ul class="food"下的第一个元素的元素内容样式
我表述的可能比较混乱 可以参考HTML 元素 http://www.w3school.com.cn/html/html_elements.asp
上面说错一点 不是各有一个框
.food>li{border:1px solid red;color:red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
</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>