本文继续介绍css3新增的选择器。
1.选择器 first-child、last-child、nth-child 和 nth-last-child
利用这几个选择器能够针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。
直接看代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3选择器</title> <style type="text/css"> li:first-child{/*第一个子元素*/ background-color: yellow; } li:last-child{/*最后一个子元素*/ background-color: lightblue; } li:nth-child(3){/*从上往下数第三个子元素*/ background-color: pink; } li:nth-last-child(2){/*从下往上数第二个子元素*/ background-color: firebrick; } </style> </head> <body> <h2>列表</h2> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> </body> </html>
效果：
利用奇偶设置样式：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3选择器</title> <style type="text/css"> li:nth-child(odd){/*奇数个元素*/ background-color: pink; } li:nth-child(even){/*奇数个元素*/ background-color: firebrick; } </style> </head> <body> <h2>列表</h2> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> </body> </html>
效果：
如果多组样式重复，可以直接使用αn+β类型参数，不需要定义n循环：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3选择器</title> <style type="text/css"> h2:nth-child(3n+1){ background-color: pink; } p:nth-child(3n+2){ background-color: lightblue; } p:nth-child(3n){ background-color: yellowgreen; } </style> </head> <body> <h2>标题1</h2> <p>内容1</p> <p>内容11</p> <h2>标题2</h2> <p>内容2</p> <p>内容21</p> <h2>标题3</h2> <p>内容3</p> <p>内容31</p> <h2>标题4</h2> <p>内容4</p> <p>内容41</p> </body> </html>
效果：
2. nth-of-type 和 nth-last-of-type选择器
这两个选择器和刚刚的四个child选择器类似，但是有些情况下利用这两个选择器会避免一些问题发生，下面举例说明。
如下四个段落，我们希望设置标题一和三同色，二和四同色。
<h2>标题1</h2> <p>内容1</p> <h2>标题2</h2> <p>内容2</p> <h2>标题3</h2> <p>内容3</p> <h2>标题4</h2> <p>内容4</p>
如果使用nth-child：
h2:nth-child(odd){ background-color: pink; } h2:nth-child(even){ background-color: lightblue; }
效果如下：
因为nth-child在计算子元素时将所有子元素都计算在内了，所以上面的代码中每一个h2都是第奇数个元素，而偶数个元素因为不是h2，所以样式不生效。
这种情况使用nth-of-type可以解决：
h2:nth-of-type(odd){ background-color: pink; } h2:nth-of-type(even){ background-color: lightblue; }
nth-of-type只计算父元素下的同类子元素。nth-last-of-type为从后向前数，不再赘述。
3.only-child选择器
使用only-child选择器可以代替使用 nth-child(1)：nth-last-child(1) 的实现方法。当只有一个子元素时，可以使用only-child选择器。