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

css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type，它们2个的区别是：

nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：

　　ele:nth-of-type(n)是指父元素下第n个ele元素，
　　ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败

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

p:nth-child(2) { color: red; } 我是第1个p标签 变红

p:nth-of-type(2) { color: red; } 我是第2个p标签 变红