[css] 舉例說明偽類:nth-child、:first-child與:first-of-type這三者有什么不同？

<div> <p>大兒子</p> <div>二兒子</div> <p>三兒子</p> </div> <p>二叔</p> <div>三叔<div>div:nth-child（2） 選中父元素里的第二個子元素div；（即二兒子被選中） p:first-child 選中父元素里的第一個p元素；（大兒子被選中，二叔沒有被選中，因為它不是父元素里的第一個元素） p:first-of-type 選中第一個類型為p的子元素（大兒子、二叔被選中，因為大兒子是父元素div的第一個p元素，二叔是body的一個p元素） ：nth-child（n）和：first-child 是強調父元素里的第n個xx子元素，首先是第n個，然后才是xx類型；：first-of-type 主要強調類型，即一個父元素里，無論我們想選中的那個元素前面有多少個同級元素，都不算，只要找到父元素里的第一個xx子元素就行。

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。