前言
寫這篇文章的目的，一方面是糾正自己一直以來對這個偽類的誤解(請看下面的程式碼)和更好的理解瀏覽器對:first-child解析和渲染機制，另一方面是希望通過這篇文章，能夠讓更多的新人深刻理解這個知識點。
注：first-child是CSS2的一個偽類(對於想知道偽元素和偽類的具體定義，請自行Google 或 W3C)。
程式碼示例
這個特定偽類很容易遭到誤解，所以有必要舉例來說明，廢話少說，直接上程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p:first-child { color: red; }
li:first-child { color: blue; }
</style>
</head>
<body>
<div>
<ul>
<li>Vue 2</li>
<li>Angular <strong>2</strong></li>
<li>React</li>
</ul>
<p>Hello Everyone</p>
<p><em>我</em> 是來搞事的.</p>
</div>
<p><b>註釋：</b>必須宣告 DOCTYPE，這樣 :first-child 才能在 IE 中生效。</p>
</body>
</html>複製程式碼主要看兩個部分，一是樣式部分，二是HTML主體內容，現在只需要在自己的腦海裡想象出瀏覽器渲染出來的效果，對於這個效果，我將一一腦補出來給大家.
A：我YY出來了，吶
B：可能是這樣
C：應該是這樣吧
D：你們都錯了
提示：最常見的錯誤是認為 p:first-child 之類的選擇器會選擇 p 元素的第一個子元素。
知識點整理
結果是什麼不重要，先來看看W3C CSS2.1對偽類:first-child的說明和注意事項:
The :first-child pseudo-class matches an element that is the first child element of some other element.
翻譯過來大致是(英文渣渣)：”:first-child這個偽類會匹配其它元素中第一個子元素”，也就是說，是相對於其父元素的第一個子元素。
Note that since anonymous boxes are not part of the document tree, they are not counted when calculating the first child.
大致意思是：”匿名元素(比如<p>Hello <b>World</b></p>中的Hello)將不會包含在dom tree裡面，使用:first-child偽類時是不會把匿名元素當成一個元素計算進去”；也就是說，除了匿名元素，其它的任何元素都可以作為父元素，包括<body>、<ul>、<li>等等。
參考CSS2.1標準對於偽類:first-child的說明
我相信細心的人差不多都已經get到點了，第一個知識要點是 相對於父元素的第一個子元素 第二個是 不會計算匿名元素 (雖然我不知道稱為匿名元素準不準確，如果說錯的請輕拍並告訴正確的中文翻譯)
程式碼分析
搞清楚上面提到的知識點之後，我們才能夠有信心的做出專業判斷，現在分析一下之前那段程式碼。
CSS：
p:first-child { color: red; }
li:first-child { color: blue; }複製程式碼HTML：
<body>
<div>
<ul>
<li>Vue 2</li>
<li>Angular <strong>2</strong></li>
<li>React</li>
</ul>
<p>Hello Everyone</p>
<p><em>我</em> 是來搞事的.</p>
</div>
<p><b>註釋：</b>必須宣告 DOCTYPE，這樣 :first-child 才能在 IE 中生效。</p>
</body>複製程式碼CSS分析：p:first-child { color: red; }是作為某元素(不包含匿名元素)的第一子元素的所有p元素的字型顏色都設定為紅色；li:first-child { color: blue; }同理；
HTML分析：<div>是<body>的第一個子元素，最下面的<p>元素是<body>的:last-child；<ul>作為<div>第一個子元素，下面兩個<p>很明顯不作為<ul>第一子元素；<li>Vue2</li>是ul元素的第一個子元素；
以此類推，<em>作為<p>的第一子元素，<b>作為<p>的第一子元素，最終呈現在瀏覽器的效果為…
總結
:first-child和:last-child偽類在WEB開發中使用得非常頻繁，比如使用:last-child清除浮動，使用CSS對:first-child選擇的第一個子元素進行特殊處理；兩者知一曉二，所以對於深刻理解它們是非常有必要。
本文對你有幫助？歡迎掃碼加入前端學習小組微信群：
