您現在的位置: 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條評論)
                      請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
                      用戶名: 驗證碼: 點擊我更換圖片
                      最新評論
                      ------分隔線----------------------------
                      小说雯雯在工地被灌满精 漂亮人妻被中出中文字幕| 亚洲国产在线精品一区二区三区| 手机亚洲天堂av网站| 污污片大全在线观看| 热播网| 重金约战超极品嫩模| 波多野吉衣免费一区视频| 医生玩弄刚刚发育小奶头| 战寒爵洛诗寒全文免费| japanesemoe国语| 任我爽橹在线视频精品| jlzzjlzzjlzz亚洲日本| 高清特黄a大片| 自拍另类综合欧美| 婷婷丁香| 狠狠色综合激情丁香五月| 免费观看全部a片大全| 好紧好大快点舒服使劲小说| 久久人人超97人妻免费| 国产精品日韩专区第一页| 人妻少妇中文字幕乱码| 无遮挡全彩黄漫漫画大全集国内| 日本windows 欧美mac| 俄罗斯雏妓的bbb| 亂倫200篇小说| 快穿寻找粗跟h| 日本网站一区免费观看| 办公室里玩弄丝袜高跟秘书| 午夜福利1000集福利92| 青青青视频在线最热| 2020亚洲中文无码av在线| http://www.duan3.com