以前一般都用:nth-child，后来知道了:nth-of-type，然后就一般用nth-of-type
它们两有什么区别呢？
首先来看个现象：
假如有这样一个HTML结构
<div class="post">
<p>我是段落1</p>
<p>我是段落2</p>
</div>
分别加上两个样式的效果
.post > p:nth-child(2){
background-color: red;
}
.post > p:nth-of-type(2){
background-color: yellow;
}
这个时候我们发现它们的效果是一样的，那么它们的区别是什么呢？别着急，看下面这个例子
这是HTML结构：
<div class="box">
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
</div>
和案例1一样的样式加上去
.box > p:nth-child(2){
background-color: red;
}
.box > p:nth-of-type(2){
background-color: yellow;
}
如果我们把样式稍微改一下
.box > p:nth-child(1){
background-color: blue;
}
.box > p:nth-of-type(1){
background-color: blue;
}
这个时候:nth-child的效果就比较出乎意料了；
通过几个案例在来说两者的区别可能好理解一点：
"p:nth-chil(n)":p的父元素的第n个子元素，如果这个元素时p类型，那么就给它加上后面的样式，如果不是那就算了
"p:nth-of-type(n)":p的父元素的p类型的子元素的第n个