css3 :nth-child和:nth-of-type的区别

css3 :nth-child和:nth-of-type的区别

对于初学者和平时工作应用中，区别nth-child和nth-of-type是一个很大的盲区，为了更好帮助大家区分两者使用方法，特在此加以区分。

首先创建一个HTML结构

<div class='parent'>
        <p>我说文章的第一个段落</p>
        <p>我说文章的第二个段落</p>
</div>

接下来使用nth-child和nth-of-type选择段落并改变其文字颜色

.parent>p:nth-child(2){
    background-color: red;
}
.parent>p:nth-of-type(2){
    color: pink;
} 

上面的代码都把.parent中的第二段文字字体变为粉色、背景为红色。虽然都能选中同一个元素。但是有区别的。:nth-child仅从字面上来解释，其实包含了两层意思。首先是一个段落元素，而且这个段落是父元素“div”的第二个子元素；而:nth-of-type从字面上解释是“选择父元素div的段落二”。

上面一段话看起来是不是很晕，有没有更好方法来区分它们呢？ 有的！把上面的HTML结构改变一下，在段落前加一个标题“h1”。

<div class='parent'>
    <h1>我是标题</h1>
    <p>我说文章的第一个段落</p>
    <p>我说文章的第二个段落</p>
</div>

前面的样式不变，但结构却完全不同了。“p:nth-child(2)”并没有选择段落二，而是选择了段落一，从而没有达到需要的效果。第一个段落变为红色，第二个段落字体变为粉色。

如果在“h1”标题后面添加一个“h2”标题，此时“p:nth-child(2)”将无法选择任何元素，因为，此时“div”的第二个元素并不是段落一“p”，所以无法选择任何元素。但“p:nth-of-type(2)”仍然能正常工作，因为选择的始终是“div”中第二个段落“p”。

---

大家只需记住一点：“nth-child”选择的是父元素的子元素，这个子元素并没有指定确切类型，同时满足两个条件时方能有效果：其一是子元素，其二是子元素刚好处在那个位置；“nth-of-type”选择的是某父元素的子元素，而且这个子元素是指定类型。