<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
.first>span{border:1px solid red;}
.second{
color:blue;
}
</style>
</head>
<body>
<p class="first">三年级时,<span class="first">我还是一个<span class = "second">胆小如鼠</span>的小女孩</span>,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
.first>span
>子选择器的意思是指firs仅作为span的子类,如果在其他标签(比如p)中调用是无效的。这是这节课中老师想要教授的意思。
至于楼主的问题,second类是没有加选择器限制的,在代码
<span class="first">我还是一个<span class = "second">胆小如鼠</span>的小女孩</span>
中 second类作为first的子类,继承了first,所以“胆小如鼠”也被红框划开了。
这个要分开来说,第一个大红框是<p class="first">这个first的子类
<span class="first">我还是一个<span class = "second">胆小如鼠</span>的小女孩</span>的样式
胆小如鼠的红框是<span class="first">这里面的first的子类
<span class = "second">胆小如鼠</span>的样式。