資訊專欄INFORMATION COLUMN
摘要：關(guān)于的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標(biāo)簽進(jìn)行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標(biāo)簽的時候，兩者沒什么區(qū)別。
關(guān)于nth-child && nth-of-type的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家
按標(biāo)簽進(jìn)行選擇寫法一：
111
222
333
444
555
666
777
使用p:nth-child(n+2){color:red;}得出的效果如圖：
使用p:nth-of-type(n+2){color:green;}得出的效果如圖：
由以上兩個效果圖可知，在父級元素（div.class=aaa）下只有p標(biāo)簽的時候，兩者沒什么區(qū)別。
寫法二：
哈哈
111
222
333
444
css中使用p:nth-child(n+2)的時候，效果如下：
css中使用p:nth-of-type(n+2)的時候，效果如下：
由此可知，nth-child和nth-of-type的區(qū)別就是nth-child只選擇父級元素下的第幾個子元素，不會對子元素的標(biāo)簽進(jìn)行區(qū)分，如選擇的條件是n+2,從父級元素第二個子元素開始選擇，當(dāng)?shù)诙€元素是p標(biāo)簽則進(jìn)行選擇，如果不是則跳過，如：
而nth-of-type會選擇標(biāo)簽的第幾個元素，如，p:nth-of-type(n+2)，就是讀取父級元素下p標(biāo)簽的第幾個元素。當(dāng)你在p標(biāo)簽之中插入其他標(biāo)簽的時候，也是讀取p標(biāo)簽的第幾個元素。如：
以上講解的是nth-child 和 nth-of-type都是用標(biāo)簽進(jìn)行選擇，下面講講它們用class類名進(jìn)行選擇的區(qū)別
按class類名進(jìn)行選擇寫法一：
111
222
333
444
555
666
777
這種寫法使用nth-child和nth-of-type的效果一樣，和標(biāo)簽選擇的效果也一樣，所以不再詳細(xì)說明。
寫法二：
哈哈
111
222
我是span標(biāo)簽
333
我是span標(biāo)簽2
444
使用.bbb:nth-child(n+2){color:red;}使用的效果如圖：
而使用.bbb:nth-of-type(n+2){color:green;}的效果如圖：
這就有個問題，nth-child和nth-of-type是否是根據(jù)class類名進(jìn)行選擇，還是根據(jù)標(biāo)簽選擇。為了測試，我將html改為：
哈哈
111
222
我是span標(biāo)簽
333
我是span標(biāo)簽2
444
555
666
使用.bbb:nth-child(n+2){color:red;}使用的效果如圖：
而使用.bbb:nth-of-type(n+2){color:green;}的效果如圖：
而當(dāng)給“222”和“333”之間的span標(biāo)簽加上一個class=“bbb”的類名的時候，出現(xiàn)的效果如圖：
html代碼：
哈哈
111
222
我是span標(biāo)簽
333
我是span標(biāo)簽2
444
555
666
我是div.class=bbb
我是a標(biāo)簽第一個
我是a標(biāo)簽第二個
使用p:nth-child(n+2){color:red;}效果如圖：
使用p:nth-of-type(n+2){color:green;}效果如圖：
由以上兩個效果圖可知，nth-child和nth-of-type可以通過class類名進(jìn)行選擇，nth-child是從父元素div下的第二個子元素進(jìn)行判斷，如果擁有該class類名，則進(jìn)行選中；但是 nth-of-type是首先判斷class名的標(biāo)簽的類型，再分別對不同的標(biāo)簽從對應(yīng)的位置開始選擇擁有該類名的元素(如這里，先開始給p標(biāo)簽從第二個元素開始選擇，如果擁有該類名則選中，再給span標(biāo)簽的第二個元素開始選擇，如果擁有該類名則選中)。
總結(jié)：nth-child:
用標(biāo)簽進(jìn)行選擇：如p:nth-child（n+2） 對父級元素的子元素進(jìn)行統(tǒng)計，從第二個子元素開始判斷，如果是該標(biāo)簽則選中
用類名進(jìn)行選擇：如.div：nth-child(n+2) 同理，對父級元素的子元素進(jìn)行統(tǒng)計，從第二個子元素開始判斷，如果子元素?fù)碛性擃惸縿t選中。
nth-of-type:
用標(biāo)簽進(jìn)行選擇：如p:nth-of-type（n+2） 父級元素的p標(biāo)簽的子元素，從第二個p標(biāo)簽開始選中
用類名進(jìn)行選擇：如.div：nth-of-type(n+2) 父級元素?fù)碛衏lass=“div"的所有不同的標(biāo)簽并分別進(jìn)行判斷，分別對不同的標(biāo)簽的第二個元素開始判斷，如果擁有class=“div”的類名則選中。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/49739.html
摘要：關(guān)于的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標(biāo)簽進(jìn)行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標(biāo)簽的時候，兩者沒什么區(qū)別。 關(guān)于nth-child && nth-of-type的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標(biāo)簽進(jìn)行選擇 寫法一： ...
摘要：關(guān)于的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家按標(biāo)簽進(jìn)行選擇寫法一使用得出的效果如圖使用得出的效果如圖由以上兩個效果圖可知，在父級元素下只有標(biāo)簽的時候，兩者沒什么區(qū)別。 關(guān)于nth-child && nth-of-type的區(qū)別，網(wǎng)上很多人的解釋是存在誤區(qū)，解釋是不夠清楚的，今天在這里把個人測試過的分享給大家 按標(biāo)簽進(jìn)行選擇 寫法一： ...
摘要：選取所有擁有名為的屬性的元素。選取元素的所有元素，且其中的元素的值須大于。且供選擇的路徑之間并無關(guān)聯(lián)。選擇當(dāng)前節(jié)點的所有先輩。文本讀取文件讀取利用解析選擇器轉(zhuǎn)自阮一峰的網(wǎng)絡(luò)日志基本選擇器最基本的就是針對標(biāo)簽，類以及了。 本文參考較多，原創(chuàng)基本沒有，權(quán)當(dāng)知識歸納。xpath并不復(fù)雜，簡單的使用看完之后，及時查閱文檔也是可以寫出來的。這里放上我的練手文件，大家可以參考，或者挑毛病(^__^...
摘要：和是的兩個偽選擇器。就是要找第二個子元素，也就是第二步檢查是否匹配。你以為會匹配到結(jié)果并沒有解釋的查找過程也有兩步找出同標(biāo)記類型下的第個元素。那么這個樣式應(yīng)用成功，因為匹配。但是則應(yīng)用失敗，因為的里沒有。 nth-child 和 nth-of-type是CSS的兩個偽選擇器。要對相同位置或相似做操作的時候非常有用。前者的字面意思是選擇第幾個子元素，后者的字面意思是選擇某類型的第幾個元素...
摘要：和是的兩個偽選擇符。所以，和的不同之處就是查找元素的方式不同。前者是查找兄弟元素中某個絕對位置的元素，后者是查找同類型元素中某個絕對位置的元素。也就是說選擇符與他們的查找方式?jīng)]有關(guān)系。錯誤查找第二個包含的元素。 nth-child和nth-of-type是css的兩個偽選擇符。應(yīng)用中，這兩者常常容易混淆。這里把它們拿出來仔細(xì)做個對比，看看這兩者是怎么查找元素的。 nth-child(n...
閱讀 2478·2021-09-22 16:05
閱讀 2961·2021-09-10 11:24
閱讀 3632·2019-08-30 12:47
閱讀 2941·2019-08-29 15:42
閱讀 3379·2019-08-29 15:32
閱讀 1946·2019-08-26 11:48
閱讀 1082·2019-08-23 14:40
閱讀 902·2019-08-23 14:33
