nth-of-type和nth-child的區別

1、:nth-child(n) 選擇器

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不管元素的類型，n 可以是數字、關鍵詞或公式。

2、:nth-of-type(n)
:nth-of-type(n)選擇器匹配屬于父元素的特定類型的第N個子元素，對元素類型有限制；n可以是數字、關鍵詞或公式，先分類型后數是第幾個。

nth-of-type和nth-child的相關使用

選擇器	作用
:first-child	所有標簽中的第一個,并且要符合設定的標簽類型
:last-child	所有標簽中的最后一個,并且要符合設定的標簽類型
:nth-child()	符合指定順序的標簽.()當中可寫內容:一個數值,表示指定的順序;英文單詞odd奇數標簽even偶數標簽.公式:a*n +/- b,公式沒有固定的寫法,完全根據需求而定,a,b是根據需求自行設定的數字,n是css3系統規定的,從0開始的整數,將n賦值,是從0開始的整數,再根據公式計算出數值,按照數值給指定順序的符合設定的標簽添加樣式效果
nth-last-child()	與nth-child()的所有語法都相同,只是計算順序,是從最后一位開始,例如:nth-last-child(3)
:first-of-type	所有符合設定類型的標簽中的第一個
:last-of-type	所有符合設定類型的標簽中的最后一個
:nth-of-type()	符合指定順序的標簽,()當中可寫內容:一個數值表示指定的順序,英文單詞odd奇數標簽、even偶數標簽.公式a*n +/- b公式沒有固定的寫法,完全根據需求而定a,b是根據需求自行設定的數字n是css3系統規定的,從0開始的整數將n賦值,是從0開始的整數,再根據公式計算出數值,按照數值給指定順序的符合設定的標簽添加樣式效果
:nth-last-of-type()	與nth-of-type()的所有語法都相同,只是計算順序,是從最后一位開始,例如:nth-last-of-type(3),所有符合設定類型的標簽中的倒數第三個標簽

:nth-child(n)??

經驗與技巧:當“:nth-child(n)”選擇器中的n為一個表達式時，其中n是從0開始計算，當表達式的值為0或小于0的時候，不選擇任何匹配的元素

n 取負值，會有“向前”的效果，

比如:nth-child(-n+3)選擇前三個元素，:nth-child(-2n+10)選擇前十個里面的偶數元素

:nth-child(-n+3)?? 正數前三個

:nth-last-child(-n+3) 倒數前三個

:nth-child(n+4)選取大于等于4標簽，從第四個到最后

:nth-child(3n+1)自定義選取標簽，3n+1表示“隔二取一”,1,4,7,10..

:nth-child(2n+1)自定義選取標簽，2n+1表示“隔一取一”,1,3,5,7..

:nth-child(n+3)????????? 從第三個開始到最后

并集 :nth-child(-n+3),:nth-child(n+5)----前三個和第5個之后的部分 ??（用逗號隔開）

交集 :nth-child(n+3):nth-child(-n+6)----三到六 ??? （直接拼接在后面，不需要隔開）?

nth-of-type和nth-child的使用方法基本相同，注意其選取元素的差別即可。

總結

以上是生活随笔為你收集整理的nth-of-type和nth-child的区别与相关使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。