:nth-child和:nth-of-type之间的差异

参考文章
CSS3选择器:nth-child和:nth-of-type之间的差异

举例来说：

• p:nth-child(2)选择的是其父元素下的第二个子元素，且为p元素。此处关键的是一定选择的是其父元素下的第二个子元素，若刚好为p元素则可以选择，若不是p元素则不会选择上任何元素。

• p:nth-of-type(2)选择的是其父元素下第二个p元素。注意此时选择的不一定是父元素的第几个子元素，但是一定是p元素中的第二个。

<section>
    <div>我是一个普通的div标签</div>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }

这里nth-child（2）会选择上第一个p标签，因为它是父元素的第二个子元素，且为p元素。
而nth-of-type(2) 则会选择上第二个p元素，正如我们希望的。