CSS里關於元素匹配里面有兩個非常類似卻又不盡相同的選擇器，偽類 :first-child 和 :first-of-type
兩者在匹配方式上有很大差異，其實在一開始自己也沒去注意這個細節，直到上次一個同事遇到同級元素匹配失敗的問題后才發現原來以前的理解都不正確。
先來看看可愛的同事遇到的問題：
HTML代碼
1 <div id="add_road"> 2 <span class="input-title">路段 I D</span> 3 <input id="road_id" placeholder="road-id" value="S12"/> 4 <span class="required">*</span> 5 <span class="input-title">路段名稱</span> 6 <input id="road_name" placeholder="rode-name" value="蘇州橋"/> 7 <span class="required">*</span> 8 </div>
CSS代碼
1 .add_input input:first-child{ 2 color:#3c0; 3 } 4 .add_input input:last-child{ 5 color:#c30; 6 }
在此為了測試方便對代碼做了一些調整。效果如圖：
可是發現我們對字體顏色進行設置的CSS代碼沒有效果，這跟我之前理解的:first-child和:last-child就有些出入。
那么接下來我們把最后一個<span>去掉
即：
刪減后的HTML代碼
1 <div id="add_road"> 2 <span class="input-title">路段 I D</span> 3 <input id="road_id" placeholder="road-id" value="S12"/> 4 <span class="required">*</span> 5 <span class="input-title">路段名稱</span> 6 <input id="road_name" placeholder="rode-name" value="蘇州橋"/> 7 </div>
效果如圖：
我們發現：咦~ :last-child生效了，可我們想要的效果是一個為綠色，一個為紅色，這顯然還有差距。
然后我們再把第一個span刪掉：
刪減后的HTML代碼
1 <div id="add_road"> 2 <input id="road_id" placeholder="road-id" value="S12"/> 3 <span class="required">*</span> 4 <span class="input-title">路段名稱</span> 5 <input id="road_name" placeholder="rode-name" value="蘇州橋"/> 6 </div>
效果如圖：
結果不錯，雖然沒有標題很丑，但是至少兩個偽類都有效果了。
那現在我們需要分析一下為什么會出現這種結果。
首先對:first-child和:first-of-type用一句話做出總結：
A B:first-child —— A元素的第一個子元素，且這個子元素為B，如果不是則CSS失效
A B:first-of-type —— A元素的第一個為B的子元素
也就是說在使用:first-child 時需要注意元素之前不能有其他同級元素，不然會使得樣式失效，而在不確定的情況下可使用first-of-type屬性
在CSS參考手冊上有個關於:nth-child 的例子挺不錯，可以幫助我們更有效地理解這個偽類
示例代碼
1 <div> 2 <p>第1個p</p> 3 <p>第2個p</p> 4 <span>第1個span</span> 5 <p>第3個p</p> 6 <span>第2個span</span> 7 <p>第4個p</p> 8 <p>第5個p</p> 9 </div>
當我們使用 p:nth-child(3){color:#f00;} 時發現並沒有任何效果，而再嘗試 p:nth-child(4){color:#f00;} 可以看到 <p>第3個p</p> 這一元素變為了紅色而不是 <p>第4個p</p>
在此對於 :nth-child(n) 的解釋為： E:nth-child(n) 會選擇父元素的第n個子元素E，如果第n個子元素不是E，則是無效選擇符，但n會遞增
大家可以據此理解兩個偽類之間的區別於聯系。
祝生活愉快~