:nth-child(n)与:nth-of-type(n)为啥显示不对呢

首先是二者的区别

: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了，这方面出现问题不符合预期，就重点关注伪类元素的父元素！