css中first-of-type和first child的區(qū)別有哪些

這篇文章主要介紹了css中first-of-type和first child的區(qū)別有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　<div>

　　<h2></h2>

　　<p></p>

　　<span></span>

　　<span></span>

　　</div>

　?。?）：first-child

　　h2:first-child：選擇的是h2元素，因?yàn)閔2元素是div的第1個(gè)子元素。

　　p:first-child：選擇不到任何元素，因?yàn)閜并不是div的第1個(gè)子元素，而是div的第2個(gè)子元素。

　　span:first-child:選擇不到任何元素，因?yàn)閟pan并不是div的第1個(gè)子元素，而是div的第3個(gè)子元素；

　?。?）：first-of-type

　　h2:first-of-type:選擇的是h2元素，因?yàn)閔2元素是div中所有h2元素中的第1個(gè)h2元素，事實(shí)上也只有一個(gè)為h2的子元素；

　　p:first-of-type:選擇的是p元素，因?yàn)閜元素是div中所有p元素中的第1個(gè)p元素，事實(shí)上也只有一個(gè)為p的子元素；

　　span:first-of-type:選擇的是id="first"的span元素，因?yàn)樵赿iv元素中有2個(gè)span元素，我們選擇的是兩個(gè)之中的第1個(gè)。

　　總結(jié)：

　　“：first-child”是選擇父元素下的第1個(gè)子元素（不區(qū)分元素類型），而“：first-of-type”是選擇父元素下某個(gè)元素類型的第1個(gè)子元素（區(qū)分元素類型）。

　　“：last-child”和“：last-of-type”、“nth-child（n）”和“：nth-of-type（n）”同樣也可以這樣去理解，在此不再累贅說明。


 

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css中first-of-type和first child的區(qū)別有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!