兩者都是選擇器，在CSS和JS中，都可以用來選擇元素。得到一個(gè)元素，或者元素集。

x:nth-child(n) 獲取 x元素的父元素中，第n個(gè)元素。無類型限制。

x:nth-of-type(n) 獲取x元素父元素中，第n個(gè)x元素。限制了類型。

因此，僅僅從字面意義上，就能做好區(qū)分了，一個(gè)是限制了類型，一個(gè)是不限制。

關(guān)于其中的參數(shù)，可以是數(shù)字，也可以表達(dá)式，也可以是固定的字母。

el:nth-child(2)：選擇父元素列表中的第 2 個(gè)標(biāo)簽。

el:nth-child(n)：選擇父元素列表中的第 n 個(gè)標(biāo)簽。

el:nth-child(2n)：選擇父元素列表中的第 2n 個(gè)標(biāo)簽，也就是偶數(shù)個(gè)元素。

el:nth-child(n+n)：選擇父元素列表中的第 n 個(gè)標(biāo)簽后的標(biāo)簽。

el:nth-child(-n+n)：選擇父元素列表中的第 n 個(gè)標(biāo)簽之前的標(biāo)簽。

el:nth-child(odd)：選擇父元素列表中的是奇數(shù)的標(biāo)簽。

el:nth-child(even)：選擇父元素列表中的是偶數(shù)的標(biāo)簽。

el:nth-child(n+3)：未知

el:nth-child(n-3)：未知

----------------------------------------------------2020年3月26號(hào)新增

假如a=10

添加變量的基本方式

　　nth-child("+a+")，nth-child-type("+a+") 得到10

添加表達(dá)式的基本方式

　　nth-child("+a+1+")-------nth-child(101) 一般來說，這是錯(cuò)誤的寫法

　　nth-child("+(a+1)+")-------nth-child(11) 對(duì)比上一個(gè)，這一般是正確的寫法

總結(jié)

以上是生活随笔為你收集整理的nth-child()和nth-of-type()的区别，以及如何在nth中添加变量和表达式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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