CSS3选择器:nth-child和:nth-of-type的差异

p:nth-child(2)表示这个元素要是p标签，且是第二个子元素，是两个必须满足的条件。

<section>

    <div>我是一个普通的div标签</div>

    <p>我是第1个p标签</p>

    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->

</section>

于是，就是第一个p标签颜色为红色（正好符合：p标签，第二个子元素）。如果在div标签后面再插入个span标签，如下：

<section>

    <div>我是一个普通的div标签</div>

    <span>我是一个普通的span标签</span>

    <p>我是第1个p标签</p>

    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->

</section>

那么p:nth-child(2)将不会选择任何元素。

p:nth-of-type(2)表示父标签下的第二个p元素，显然，无论在div标签后面再插入个span标签，还是h1标签，都是第二个p标签中的文字变红。

参考链接：

巴特西