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

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

文章來源:365jz.com     點擊數:170    更新時間: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那么碰到不同類型的,單獨一類,符合條件的選中。



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


發表評論 (170人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
365建站网-快速批量建站_企业免费建站_智能建站软件系统_在线建站和seo工具
深田咏美在线| videossexotv极度另类| 97人妻起碰免费公开视频| 那一夜他把我做到喷水| 免看黄大片app视频| japanesehd40成熟| 让闺蜜感动到哭的留言| 欧美变态口味重另类| 日韩中文字幕| 激情五月婷婷| poronovideos极度另类| 日本毛片| 日本按摩高潮a级中文片| 双性受合不垅腿攻| av天堂网| 快穿之娇妻| 人妻互换免费中文字幕| 337p日本欧洲亚洲大胆69影院| 温碧霞三级片| 男人的天堂av| 黄色录相| 深田咏美在线| 成人黄色电影| 黄色免费视频| http://m.xl1y.com