• first-child是CSS2中定義的選擇器，從字面意思也可以理解，就是第一個子元素。不如有段代碼：

<div>
        <p>第一個子元素</p>
        <h1>第二個子元素</h1>
        <span>第三個子元素</span>
        <span>第四個子元素</span>
</div>

p:first-child 匹配到的是p元素，因為p元素是div的第一個子元素；
h1:first-child 匹配不到任何元素，因為在這里h1是div的第二個子元素，而不是第一個；
span:first-child 匹配不到任何元素，因為span和h1一樣，都不是div的第一個子元素；

• first-of-type：是CSS3中定義的，這個和first-child有什么區別呢？還是這段代碼：

<div>
        <p>第一個子元素</p>
        <h1>第二個子元素</h1>
        <span>第三個子元素</span>
        <span>第四個子元素</span>
</div>

p:first-of-type：匹配到的是p元素，因為p是div所以類型為p的子元素中的第一個；
h1:first-of-type：匹配到的是h1元素，因為h1是div所以類型為h1的子元素中的第一個；
span:first-of-type：匹配到的是第一個span元素，這里div有倆個span子元素，匹配到第一個；

• 所以，通過以上倆個例子可以得出結論：
  ：first-child：匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。
  ：first-of-type：匹配的是某父元素相同類型子元素中的第一個，比如span：first-of-type，就是所以類型為span的子元素中的第一個。這里不再限制是第一個子元素了，只要是該類型元素的第一個就行了。

同樣類型的選擇器還有：last-child 和 last-of-type；nth-child（n）和：nth-of-type（n）也可以這樣去理解。參考文獻--無雙博客