CSS3中:first-child和:first-of-child的區別

CSS中加入了不少高級的選擇器，能讓咱們方便的查找到元素，而後給查找到的元素設置樣式，其中:first-child和:first-of-child看似只相差一個單詞，可是卻有不一樣的用法和意義，今天的這篇文章就給你們來講說:first-child和:first-of-child兩個選擇器的區別。

HTML代碼

加入咱們有這樣的一段HTML代碼：

<div>
    <p>第1個元素</p>
    <h1>第2個元素</h1>
    <span>第3個元素</span>
    <span>第4個元素</span>
</div>

CSS選擇器

咱們要查找其中的元素，若是使用下面的定義方法

• p:first-child  匹配到的是p元素,由於p元素是div的第一個子元素；
• h1:first-child  匹配不到任何元素，由於在這裏h1是div的第二個子元素，而不是第一個；
• span:first-child  匹配不到任何元素，由於在這裏兩個span元素都不是div的第一個子元素；
• :first-child  匹配到的是p元素,由於在這裏div的第一個子元素就是p。

上面應用的樣式，有兩個是匹配不到的，可是別慌張，CSS中還定義了:first-of-child僞類，請看他的用法和講解：

• p:first-of-type  匹配到的是p元素,由於p是div的全部爲p的子元素中的第一個，事實上這裏也只有一個爲p的子元素；
• h1:first-of-type  匹配到的是h1元素，由於h1是div的全部爲h1的子元素中的第一個，事實上這裏也只有一個爲h1的子元素；
• span:first-of-type  匹配到的是第三個子元素span。這裏div有兩個爲span的子元素，匹配到的是第一個。
• :first-of-type  匹配到的是p元素

總結

• :first-child 匹配的是某父元素的第一個子元素，能夠說是結構上的第一個子元素。
• :first-of-type 匹配的是該類型的第一個，類型是指什麼呢，就是冒號前面匹配到的東西，好比 p:first-of-type，就是指全部p元素中的第一個。這裏再也不限制是第一個子元素了，只要是該類型元素的第一個就好了，固然這些元素的範圍都是 屬於同一級的，也就是同輩的。

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

本文系做者  問說網 受權問說網發表，並經問說網編輯，轉載請註明出處和  本文連接。