:first-child伪类表示父元素的第一个子元素。
例如：li:first-child{color:yellow}
表示父元素的第一个子元素是li的每一个颜色是黄色。

<ol>
        <li>ff</li>
        <li>dd</li>
    </ol>
    <ul>
        <li>This text will be orange.</li>
        <li>Lorem ipsum dolor sit amet. <span>This text will be orange.</span></li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>

:first-of-type表示在：前的该容器下，所有父元素的第一个元素。
例如ul :first-of-type{color:yellow}（ul 空格:first-of-type{color:yellow}）表示在ul这个容器下，所有父元素的第一个子元素颜色是黄的，同理适用于first-child

ul :first-of-type{color:yellow}

<ul>
        <li>This text will be orange.</li>
        <li>Lorem ipsum dolor sit amet. <span>This text will be orange.</span></li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>

ul:first-of-type{color:yellow}

另外关于nth-child和nth-of-type

<section>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>


p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

对于:nth-child选择器，在简单白话文中，意味着选择一个元素如果：

这是个段落元素
这是父标签的第二个孩子元素

对于:nth-of-type选择器，意味着选择一个元素如果：

选择父标签的第二个段落子元素

同样适用于first-child和first-of-type
注意～odd表示奇数,even表示偶数，从1开始计算，不是从零开始。