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

html結(jié)構(gòu)如下

<p?class="first?fir">三年級(jí)時(shí)，
????<span>我還是一個(gè)????
????????<span>膽小如鼠</span>的小女孩
????</span>，上課從來(lái)不敢回答老師提出的問(wèn)題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒(méi)有這個(gè)勇氣來(lái)回答老師提出的問(wèn)題。學(xué)校舉辦的活動(dòng)我也沒(méi)勇氣參加。
</p>

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

這里只作用于第一個(gè)span元素，所以只有第一個(gè)span元素有邊框。也就是從“我還是一個(gè)膽小如鼠的小女孩”是有邊框。

而

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

這里作用于全部span后代，除了子代的span元素，還有“膽小如鼠”這個(gè)孫代。所以這里有2個(gè)邊框，一個(gè)是外面span元素的邊框，一個(gè)是里面span元素的邊框。所以看起來(lái)就有框間隔。

<span>我還是一個(gè)<span>膽小如鼠</span>的小女孩</span>你用后代選擇器，這里有兩個(gè)后代，第一個(gè)：<span>我還是一個(gè)<span>膽小如鼠</span>，第二個(gè)：<span>膽小如鼠</span>的小女孩</span>，所以，第一個(gè)框框的是”我還是一個(gè)膽小如鼠“，第二框框的是”膽小如鼠的小女孩“，連起就是你描述的那樣了。而在子選擇器中，”<span>我還是一個(gè)<span>膽小如鼠</span>的小女孩</span>“，這就是一個(gè)整體，就一框全部。

到了下一節(jié)才注意到dom結(jié)構(gòu)，是一個(gè)span里面還有個(gè)小span，剛才看到兩個(gè)span并列了