您現在的位置: 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影院 国产av国片精品青草社区| 成人黄色电影| 同性男男黄网站在线观看| 真人试看做受120秒3分钟| 狠狠躁天天躁中文字幕无码| 欧美成人免费全部网站| 理论三级a午夜电影www| 亚洲三级免费| 亚洲人成a视频| 啦啦啦免费高清在线直播| 夭天曰天天躁天天摸| 久久香蕉国产免费天天| 欧美a级中文完在线看完整版| 国产yw885.ccm免费观看网站| 花木兰被俘奶| 在线看片免费人成视频菠萝蜜| 夜鲁鲁鲁夜夜综合视频 | 欧美超大胆裸体xx视频| 邻居的夫妇交换3| 女人爽到喷水的视频大全| 日韩精品视频一区二区三区| 中国gay体育生chinese| 尤物tv在线进入| 亚洲av无码一区二区二三区| 亚洲理论在线a中文字幕| 日本高清视频在线网站| 在线亚洲欧美日本专区| 中国老头oldday tv| 男女祼交动态图h| 小妖精跪趴灌满书包网| 两个人舔我一前一后| http://www.souzoku01.com