CSS3中新增了几个子元素选择器，大大提高了开发者的开发效率。之前有些要通过为一个个子元素添加class，或者js实现才能实现的效果。现在可以很方便的用选择器实现。

这些新的样式已被现代浏览器及IE9以上支持。

选择器                                     说明

:first-child                         第一个子元素

:last-child                         最后一个子元素

:nth-child(3)                         第三个子元素

:nth-last-child(3)                  倒数第三个子元素

:nth-child(odd)                 所有奇数个子元素

:nth-child(even)                 所有偶数个子元素

div h2:nth-of-type(even)div    中所有的h2元素中，所有的偶数元素(只针对同类型子元素计算)

:nth-last-of-type                 反过来计算

li:nth-child(4n+1)                 循环样式 匹配第1，5，9...个li

li:nth-child(4n+2)                 循环样式 匹配第2，6，10...个li

li:nth-child(4n+4)                 可简写为 li:nth-child(4n)

ul li:first-child:last-child         是第一个也是最后一个，即匹配ul中只有一个li.

:only-child                       上面的简写形式。匹配某个父元素只有一个子元素

h2:nth-child(3) 与 h2:nth-of-type(3) 的区别？

h2:nth-child(3) 指 第三个子元素中正好是h2则应用该样式

h2:nth-of-type(3) 指所有的h2子元素的合集中，对第三个h2应用该样式html>

/*选择的是#hd里第一个p标签*/

#hd p:first-of-type{

color: blue;

font-size: 25px;

}

/*选择的是#hd里最后一个p标签*/

/*#hd p:last-of-type{

color: purple;

font-size: 25px;

}*/

/*如果div中只有一个p标签,就选中这个p标签(div可以有其它兄弟元素)*/

/*div p:only-of-type{

color: orange;

font-size: 25px;

}*/

/*选择的是div中独生子的(要求这个p标签没有任何兄弟元素)p标签*/

/*div p:only-child{

color: orange;

font-size: 25px;

}*/

/*选择的是div中第3个元素，并且要求第3个元素是p标签可以选中(如果第三个标签不是p标签选不中的)*/

/*div p:nth-child(3){

color: red;

font-size: 25px;

}*/

/*选择的是div中倒数第6个元素，并要求....*/

/*div p:nth-last-child(6){

color: orange;

font-size:60px;

}*/

/*选择的是div中第4个的p标签*/

/*div p:nth-of-type(4){

color: red;

font-size: 26px;

}*/

/*选择的是div中倒数第2个的p标签*/

/*div p:nth-last-of-type(2){

color: red;

font-size: 26px;

}*/

/*选择的是每个div里第一个span标签,并且要求第一个标签符合冒号前面的选择器的要求(简单说就是每个div第一个span标签)*/

div span:first-child{

color: blue;

font-size: 26px;

}

/*选择的是每个div里最后一个p标签*/

div p:last-child{

color: orange;

font-size: 26px;

}