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

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并列了