child系列

p:first-child———————————选择属于父元素的第一个子元素的每个

元素。
p:last-child———————————选择属于其父元素最后一个子元素每个

元素
p:nth-child(even)—————————-选择属于其父元素的第二个子元素的每个

元素
p:nth-last-child(odd)———————同上，从最后一个子元素开始计数
括号里面放even—————————-奇数的都会被选到
括号里面放odd—————————-偶数的都会被选到

nth-of-type系列

p:first-of-type——————————-选择属于其父元素的首个

元素的每个

元素。
p:last-of-type——————————-选择属于其父元素的最后

元素的每个

元素。
p:nth-of-type(2)—————————选择属于其父元素第二个

元素的每个

元素。
p:nth-last-of-type(2)——————-同上，但是从最后一个子元素开始计数

使用规则与nth-child一样，唯一的区别是

 p:nth-child(2){
    background-color: peru;
    font-size: 30px;
}
<p>1</p>
<i>ee</i>
<p>2</p>
<i>ee</i>
<p>3</p>
<i>ee</i>
如果第二个标签选中的位置不是p标签 是不会有效果的，这个情况需要选择第三个才可以p:nth-child(3)
小结：因为nth-child的选择器是排位置，然后再找标签的，如果标签和位置对不上是无效
nth-of-type与nth-child不同之处
 p:nth-of-type(2){
    background-color: peru;
    font-size: 30px;
}
<p>1</p>
<i>ee</i>
<p>2</p>
<i>ee</i>
<p>3</p>
<i>ee</i>
如果第二个标签选中的位置不是p标签，就会直接跳过选下一个p标签，也就是第二个位置直接被忽略了
小结：因为nth-of-type的选择器是根据标签，来排位置的
如果对上不对的位置会直接忽略直接选择指定的标签位置