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

实例：

首先创建一个HTML结构

<div class="post">
    <p>我是文章的第一段落</p>
    <p>我是文章的第二段落</p>
</div>

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

 .post>p:nth-child(2){
            color: red;
        }

.post>p:nth-of-type(2){
            color: red;
        }

现在在段落一前面加上一个标题1

<div class="post">
    <h1>我是标题1</h1>
    <p>我是文章的第一段落</p>
    <p>我是文章的第二段落</p>
</div>

再次使用：.nth-child和nth-of-type选择并改变其文字颜色

 .post>p:nth-child(2){
            color: red;
        }

 .post>p:nth-of-type(2){
            color: red;
}

nth-child 包含两层意思，首先是一个段落元素，这个段落元素的父元素“div”的第二份子元素，而“nth-of-type”的意思是选择父元素的段落2

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

切记切记 “nth-child”选择的是父元素的子元素，这个子元素并没有指定确切类型，同时满足两个条件时，方能有效果：其一是子元素，其二是子元素刚好处在哪个位置上（也就是说所有子元素中位置为nth-child括号内指定的数字，且类型为nth-child前的元素类型生效，否则不生效）；“nth-of-type”选择的是某父元素的子元素，而且这个元素是指定类型（也就是说子元素类型为指定的类型中排在括号内指定的数字的节点）

真的绕口，还是看示例吧。。。。。。。。

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

推荐阅读