您現在的位置: 365建站網 > 365學習 > css中nth-of-type與nth-child的區別

css中nth-of-type與nth-child的區別

文章來源:365jz.com     點擊數:178    更新時間:2022-01-16 21:59   參與評論

nth-of-type與nth-child的區別,對于初學者來說是一個比較頭疼的問題,也是一個初級前端常見的面試題,那么nth-of-type與nth-child有什么區別呢?下面帶你徹底弄懂它們之間的區別。

:nth-of-type() CSS 偽類   匹配同類型中的第n個同級兄弟元素。


:nth-of-type(n):n可以是一個數字,一個關鍵字,或者一個公式。


數字,我就不多說了,注意是從1開始的哦(不是從0)


關鍵字:可選的有:odd(奇數)、even(偶數)


#wrap p:nth-of-type(even) {
            background: red;
        }

此時,背景變為紅色的就是two、four、six啦


公式:使用公式(an+ b).描述:a代表一個循環的大小,N是一個計數器(從0開始),以及b是偏移量。


怎么理解吶?


比如像上面的想要讓偶數p變為紅色背景,那么用公式就是:

#wrap p:nth-of-type(2n) {
            background: red;
        }

效果和上面的一樣。


個人還是比較喜歡用公式的,功能真的很強大,比如我們想要讓奇數的變紅公式就是2n+1嘍,想要讓3的倍數的變紅,公式就是3n啦,依次類推。


哦,說說一下,兼容性

選擇器        Chrome            IE        Firefox         Safair          Opera
:nth-of-type()4.09.03.53.29.6



嗯、其實整理完,也很簡單啦,希望看完的你也有這樣的感覺。


MDN上的概念

某個元素:nth-of-type(n)這個CSS 偽類是針對具有一組兄弟節點的標簽, 用 n 來篩選出在一組兄弟節點的位置。

某個元素:nth-child(n)這個CSS 偽類首先找到所有當前元素的兄弟元素,, 用 n 來篩選出在當前元素的兄弟元素節點的位置。

我們可以注意到:nth-of-type他是當前元素的兄弟元素的第n個,而nth-child是當前元素的兄弟節點的第n個當前元素。

我們可以舉個例子,來弄懂他們之間的區別

這是p:nth-child(4) ,他取到了p標簽的第4個



這是p:nth-of-type(4),他也取到了p標簽的第4個



但如果我們在 第二個與第三個之間加個h1呢,結果p:nth-of-type(4)取到了p元素的第四個,但是p:nth-child(4)取到的是p元素的第三個,這下我們就可以搞懂啦!



因為nth-of-type他是當前元素的兄弟元素的第n個,而nth-child是當前元素的兄弟節點的第n個當前元素,所以p:nth-of-type(4)是第四個p元素,只能是p元素的第四個,即 當前元素:nth-of-type無論中間加入什么元素,都只能是當前元素的第n個,而p:nth-child(4)是取第四個兄弟節點的p元素,所以我們發現第三個p被p:nth-child(4)取到啦。當p:nth-child(4)的第四個兄弟節點不是p元素的話,會怎么樣呢?



我們可以看到,就取不到p:nth-child(4)了。

總結:

nth-of-type是取當前元素的兄弟元素的第n個,nth-child取的是當前元素的第n個節點的當前元素

  • nth-child
    按照個數來算。

  • nth-of-type
    按照類型來計算,如果是class那么碰到不同類型的,單獨一類,符合條件的選中。



如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (178人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 高中女友粉嫩20p| 俄罗斯裸体美女|8裸交| 久久中文字幕无码中文字幕有码| 老鸭窝在线视频| youjljloljzz在线播放| 连开两个女同学的嫩苞| 国产成人精品一、二区| 久久婷婷大香萑太香蕉AV| 久久精品人人做人人爽老司机| 学生毛都没有在线播放| 美熟丰满老熟女bbw| 少妇下面流水添少妇p| 女朋友被老头玩烂小说| 久久亚洲精品日韩高清| 特级高清牲交生活片| 高潮的a片激情| 午夜男女生活片牲交| 中文字幕不卡手在线观看| 观看欧美大片毛大片| 2012高清免费完整版国语版| 两人做人爱费视频| 日日摸夜夜添夜夜添国产| 饥渴少妇高潮正在播放| 男女作爱免费网站| 日日鲁夜夜啪在线播放| 毛多水多欧美肥胖老妇性开放| 亚洲色婷婷婷婷五月基地| 和女婿做过的说说感受| 西西人体WWW大胆高清视频| 国产不卡精品视频男人的天堂| 一本大道香蕉大在线75| http://www.ntori.com