首先是二者的區別

:nth-child(n)?是選擇父元素的第n個子元素。?
:nth-of-type(n)?是選擇父元素的第n個同類型的子元素

舉個例子：

<div class="read"><h1>title</h1><p>paragraph1</p><p>paragraph2</p> <!-- 設為紅色 --> </div> /* nth-child */ .read p:nth-child(3) {color: red; }

結果：

/* nth-of-type */ .read p:nth-of-type(2) {color: red; }

結果同上圖；

.read p:nth-child(2)?選擇的是父元素.read第2個子元素，且是p元素。（先找第2個，再找是不是p）?
.read p:nth-of-type(2)?則是選擇父元素.read第2個為p的子元素。（先找p，再找第2個）

重點就在.read是其父元素，且父元素類是怎么構成的。

其他就不多舉例BB了，這方面出現問題不符合預期，就重點關注偽類元素的父元素！

?

?

總結

以上是生活随笔為你收集整理的:nth-child(n)与:nth-of-type(n)为啥显示不对呢的全部內容，希望文章能夠幫你解決所遇到的問題。

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