css選擇器中:first-child與:first-of-type的區別

:first-child選擇器是css2中定義的選擇器，從字面意思上來看也很好理解，就是第一個子元素。好比有段代碼：

p:first-child  匹配到的是p元素,由於p元素是div的第一個子元素；

h1:first-child  匹配不到任何元素，由於在這裏h1是div的第二個子元素，而不是第一個；

span:first-child  匹配不到任何元素，由於在這裏兩個span元素都不是div的第一個子元素；

 

而後，在css3中又定義了:first-of-type這個選擇器，這個跟:first-child有什麼區別呢？仍是看那段代碼：

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 匹配的是某父元素下相同類型子元素中的第一個，好比 p:first-of-type，就是指全部類型爲p的子元素中的第一個。這裏再也不限制是第一個子元素了，只要是該類型元素的第一個就好了。

一樣類型的選擇器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也能夠這樣去理解。