nth-of-type和nth-child的區(qū)別

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

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

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

nth-of-type和nth-child的相關(guān)使用

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

:nth-child(n)??

經(jīng)驗(yàn)與技巧:當(dāng)“:nth-child(n)”選擇器中的n為一個(gè)表達(dá)式時(shí)，其中n是從0開始計(jì)算，當(dāng)表達(dá)式的值為0或小于0的時(shí)候，不選擇任何匹配的元素

n 取負(fù)值，會(huì)有“向前”的效果，

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

:nth-child(-n+3)?? 正數(shù)前三個(gè)

:nth-last-child(-n+3) 倒數(shù)前三個(gè)

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

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

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。