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

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

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

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

關于其中的參數，可以是數字，也可以表達式，也可以是固定的字母。

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

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

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

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

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

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

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

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

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

----------------------------------------------------2020年3月26號新增

假如a=10

添加變量的基本方式

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

添加表達式的基本方式

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

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

總結

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

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