第一代子元素相当于爷爷的儿子，所有子后代元素相当于爷爷的儿子和孙子们。

举个例子：

<p>
    p是爷爷
    <ol>
        ol是第一代子元素
        <li>
            后代
            <ul>
            后代
                <li>1111</li>
                <li>2222</li>
            </ul>
        </li>
        <li>
            后代
            <ul>
            后代
                <li>1111</li>
                <li>2222</li>
            </ul>
        </li>
    </ol>
</p>

.b>span{color:red;}  <b>123<span>456<span>789</span></span> </b>第一代后代选择器，只有456会选中变红

.b span{color:red;} <b>123<span>456<span>789</span></span> </b> 所有子后代选择器，456789会选中变红

第一代子元素可以理解成它的孩子，而后代所有的子元素可以理解成它的所有后代，孩子，孙子等等。比如<p>标签中可能还嵌套的有<p>标签，选择的肯定不同哈

比如：爸爸是爷爷的第一子代，我以及我的后辈是爷爷的子后代当然也包括爸爸在内。