首先明白下，后代选择器是作用于所有后代（包含子代），子代选择器只作用于第一代。

html结构如下

<p class="first fir">三年级时，
    <span>我还是一个    
        <span>胆小如鼠</span>的小女孩
    </span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
</p>

.first>span{
    border:1px solid red;
}

这里只作用于第一个span元素，所以只有第一个span元素有边框。也就是从“我还是一个胆小如鼠的小女孩”是有边框。

而

.first span{
    border:1px solid red;
}

这里作用于全部span后代，除了子代的span元素，还有“胆小如鼠”这个孙代。所以这里有2个边框，一个是外面span元素的边框，一个是里面span元素的边框。所以看起来就有框间隔。

<span>我还是一个<span>胆小如鼠</span>的小女孩</span>你用后代选择器，这里有两个后代，第一个：<span>我还是一个<span>胆小如鼠</span>，第二个：<span>胆小如鼠</span>的小女孩</span>，所以，第一个框框的是”我还是一个胆小如鼠“，第二框框的是”胆小如鼠的小女孩“，连起就是你描述的那样了。而在子选择器中，”<span>我还是一个<span>胆小如鼠</span>的小女孩</span>“，这就是一个整体，就一框全部。

到了下一节才注意到dom结构，是一个span里面还有个小span，刚才看到两个span并列了