first-of-type 和 first-child

article span:first-child {
    color: red;
}
---------

<article>
    <span>111111111</span> <!-- 红色 -->
    <aside>
        <span>一一一一一一一一一</span> <!-- 红色 -->
        <span>二二二二二二二二二</span>
    </aside>
    <aside>
        <em>haha</em>
        <span>oooooooooo</span>
    </aside>
</article>

article span:first-of-type {
    color: red;
}
----------

<article>
    <span>111111111</span> <!-- 红色 -->
    <aside>
        <span>一一一一一一一一一</span> <!-- 红色 -->
        <span>二二二二二二二二二</span>
    </aside>
    <aside>
        <em>haha</em>
        <span>oooooooooo</span> <!-- 红色 -->
    </aside>
</article>

first-child 在同级元素中必须是第一个标签
first-of-type 在同级且相同标签中的第一个标签