溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css選擇器first-child與first-of-type之間有哪些區別的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
區別：:first-child匹配父元素中的第一個子元素，可以說是結構上的第一個子元素；而:first-of-type匹配父元素下相同類型子元素中的第一個，不再限制是第一個子元素了，只要是該類型元素的第一個就行了。
css選擇器中first-child與first-of-type的區別
:first-child選擇器是css2中定義的選擇器，從字面意思上來看也很好理解，就是第一個子元素，匹配其父元素中的第一個子元素。
比如有段代碼：
p:first-child 匹配到的是p元素,因為p元素是p的第一個子元素； h2:first-child 匹配不到任何元素，因為在這里h2是p的第二個子元素，而不是第一個； span:first-child 匹配不到任何元素，因為在這里兩個span元素都不是p的第一個子元素；
:first-of-type選擇器是css3中定義的選擇器，匹配元素其父級是特定類型的第一個子元素。
這個跟:first-child有什么區別呢？還是看那段代碼：
p:first-of-type 匹配到的是p元素,因為p是p的所有類型為p的子元素中的第一個； h2:first-of-type 匹配到的是h2元素，因為h2是p的所有類型為h2的子元素中的第一個； span:first-of-type 匹配到的是第三個子元素span。這里p有兩個為span的子元素，匹配到的是它們中的第一個。
所以，通過以上兩個例子可以得出結論：
:first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。
:first-of-type 匹配的是某父元素下相同類型子元素中的第一個，比如 p:first-of-type，就是指所有類型為p的子元素中的第一個。這里不再限制是第一個子元素了，只要是該類型元素的第一個就行了。
感謝各位的閱讀！關于css選擇器first-child與first-of-type之間有哪些區別就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
