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