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