首先是二者的區別

: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了，這方面出現問題不符合預期，就重點關注偽類元素的父元素！

?

?