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的差異