演示的HTML结构:

<div class="demo">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <p>p6</p>
    <p>p7</p>
    <p>p8</p>
    <p>p9</p>
    <p>p10</p>
</div>

:nth-child(n)(选择某个元素的指定的子元素 重头戏!!!)

兼容IE9以上

这里的n代表的是选择某个，默认是0(相当于选择全部)，只能是n这个字母

常用用法:

.demo p:nth-child(2){color: yellow} /* p2的颜色会变黄 */

强大用法:
n还可以这样子用:
n+2:    表示从第二个元素开始
-n+2:   表示反选的意思 这里是选中1 2个
2n   表示隔2个就选中
4n+1:   表示每隔2个就选择第一个 来个区间表示可能更直观一点: 把1、2、3、4、5、6、7、8、9、10 分成3个区间:[1,2,3,4] [5,6,7,8] [9, 10]然后4n+1的意思是选择每个区间的第一个 得出: 1 5 9；
4n+2:    就是选择每个区间的第二个 得出 2 6 10；
4n-1:    就是选择每个区间的倒数第二个(可以把区间看成一个数组，下标是0开始就好理解多了)和4n+3是一样的效果 得出 3 7；

以此类推吧

.demo p:nth-child(n+4){color: red}  /*p4-p10会变红色*/
.demo p:nth-child(-n+4){color: red}  /*p1-p4会变红色*/
.demo p:nth-child(4n){color: red}  /*p4、p8会变红色*/
.demo p:nth-child(4n+1){color: red}  /*p1、p5、p9会变红色*/
.demo p:nth-child(4n-1){color: red}  /*p3、p7会变红色*/

:nth-last-child(n) (用法和nth-child一样，不过计算方式是最后一个开始)

兼容IE9以上

.demo p:nth-last-child(2){color: yellow} /* p9的颜色会变黄 */

:first-child(选择某个元素的第一个子元素)

兼容IE7以上

.demo p:first-child{color: red} /* p1的颜色会变红 */

:last-child(选择某个元素指定最后一个子元素)

兼容IE9以上

.demo p:last-child{color: yellow} /* p10的颜色会变黄 */

以上是对CSS3 nth的一个总结，还有其他一些伪类，个人感觉很少用到所以就不详细写出来了，就简单说下吧:

下面的说明是从大漠老师那里复制过来的CSS3 选择器——伪类选择器 这篇文章给了我很大的启发，推荐可以去读下

  1. :nth-of-type() 选择指定的元素；
  2. :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
  3. :first-of-type选择一个上级元素下的第一个同类子元素；
  4. :last-of-type选择一个上级元素的最后一个同类子元素；
  5. :only-child选择的元素是它的父元素的唯一一个了元素；
  6. :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
  7. :empty选择的元素里面没有任何内容。

逃~~~~