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

<div> <p>大兒子</p> <div>二兒子</div> <p>三兒子</p> </div> <p>二叔</p> <div>三叔<div>div:nth-child（2） 選中父元素里的第二個(gè)子元素div；（即二兒子被選中） p:first-child 選中父元素里的第一個(gè)p元素；（大兒子被選中，二叔沒有被選中，因?yàn)樗皇歉冈乩锏牡谝粋€(gè)元素） p:first-of-type 選中第一個(gè)類型為p的子元素（大兒子、二叔被選中，因?yàn)榇髢鹤邮歉冈豥iv的第一個(gè)p元素，二叔是body的一個(gè)p元素） ：nth-child（n）和：first-child 是強(qiáng)調(diào)父元素里的第n個(gè)xx子元素，首先是第n個(gè)，然后才是xx類型；：first-of-type 主要強(qiáng)調(diào)類型，即一個(gè)父元素里，無論我們想選中的那個(gè)元素前面有多少個(gè)同級(jí)元素，都不算，只要找到父元素里的第一個(gè)xx子元素就行。

個(gè)人簡介

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

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。