:nth-child和:nth-of-type是CSS3中新增的伪类选择器，它俩如何使用呢？下面举例子说明。
:nth-child
p:nth-child(n)：表示p所在父元素的所有子元素中，第n个必须为p，这里的n是从第一个子元素开始计数，第一个子元素为1，第二个子元素为2，...；
<style>
p:nth-child(1) {
color: red;
}
</style>
<div class="pp">
<!-- 这段文字为红色 -->
<p>文字文字文字文字文字</p>
<p>文字文字文字文字文字</p>
<p>文字文字文字文字文字</p>
</div>
<div class="pp">
<!-- p::nth-child(1)无效，因为.pp下面的第1个元素不为p -->
<div>文字文字文字文字文字</div>
<p>文字文字文字文字文字</p>
<p>文字文字文字文字文字</p>
</div>
效果图：
:nth-of-type
p:nth-of-type(n)：表示p所在父元素的所有为p的子元素中，第n个p，这里的n是从第一个p元素开始计数，第一个p为1，第二个p为2，...；
<style>
p:nth-of-type(1) {
color: red;
}
p:nth-of-type(3) {
color: red;
}
</style>
<div class="pp">
<div>文字文字文字文字文字</div>
<!-- .pp的第一个p，这段文字为红色 -->
<p>文字文字文字文字文字</p>
<span>文字文字文字文字文字</span>
<p>文字文字文字文字文字</p>
<span>文字文字文字文字文字</span>
<!-- .pp的第三个p，这段文字为红色 -->
<p>文字文字文字文字文字</p>
</div>
效果图：
对于p:first-child和p:first-of-type，就是p:first-child(1)和p:first-of-type(1)的简写
