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标签中的文字变红。
参考链接：
http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/
CSS3选择器:nth-child和:nth-of-type的差异
原文地址：https://www.cnblogs.com/echolife/p/8652137.html