选择器first-child、last-child、nth-child和nth-last-child
利用这几个选择器，能够特别针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。
1.单独指定第一个子元素、最后一个子元素的样式
如果要对第一个列表项目与最后一个列表项目分别指定不同的背景色，目前为止采取的做法都是：分别给这两个列表项目加上class属性，然后对这两个class使用不同的样式，在两个样式中分别指定不同的背景色。但是，如果使用first-child选择器与last-child选择器，这个多余的class属性就不需要了。
first-child选择器与last-child选择器使用示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>first-child选择器与last-child选择器使用示例</title> <style type="text/css">li:first-child { background-color: yellow; } li:last-child { background-color: skyblue; } </style> </head> <body> <h2>列表A</h2> <ul> <li>列表项目1</li><li>列表项目2</li><li>列表项目3</li><li>列表项目4</li><li>列表项目5</li> </ul> </body> </html>
另外，如果页面中具有多个ul列表，则该first-child选择器与last-child选择器对所有ul列表都适用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>first-child选择器与last-child选择器使用示例</title> <style type="text/css"> li:first-child { background-color: yellow; } li:last-child { background-color: skyblue; } </style> </head> <body> <h2>列表A</h2> <ul> <li>列表项目1</li><li>列表项目2</li><li>列表项目3</li><li>列表项目4</li><li>列表项目5</li> </ul> <h2>列表B</h2> <ul> <li>列表项目1</li><li>列表项目2</li><li>列表项目3</li><li>列表项目4</li><li>列表项目5</li> </ul> </body> </html>
另外，first-child选择器在CSS 2中就已存在，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，从IE 7开始被IE浏览器所支持。
last-child选择器从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止还没有获得IE浏览器的支持。
2.对指定序号的子元素使用样式
如果使用nth-child选择器与nth-last-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定样式。这两个选择器是first-child及last-child的扩展选择器。这两个选择器的样式指定方法如下所示。
nth-child(n){ // 指定样式 } <子元素>：nth-last-child(n) { // 指定样式 }
将指定序号书写在“nth-child”或“nth-last-child”后面的括号中，如“nth-child（3）”表示第三个子元素，“nth-last-child（3）”表示倒数第三个子元素。
nth-child选择器与nth-last-child选择器使用示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>nth-child选择器与nth-last-child选择器使用示例</title> <style type="text/css"> li:nth-child(2) { background-color: yellow; } li:nth-last-child(2) { background-color: skyblue; } </style> </head> <body> <h2>列表A</h2> <ul> <li>列表项目1</li><li>列表项目2</li><li>列表项目3</li><li>列表项目4</li><li>列表项目5</li> </ul> </body> </html>
另外，这两个选择器都是从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止还没有受到IE浏览器的支持。
3.对所有第奇数个子元素或第偶数个子元素使用样式
除了对指定序号的子元素使用样式以外，nth-child选择器与nth-last-child选择器还可以用来对某个父元素中所有第奇数个子元素或第偶数个子元素使用样式。使用方法如下所示：
nth-child(odd){ // 指定样式 } // 所有正数下来的第偶数个子元素 <子元素>:nth-child(even) { // 指定样式 } // 所有倒数上去的第奇数个子元素 <子元素>:nth-last-child(odd) { // 指定样式 } // 所有倒数上去的第偶数个子元素 <子元素>:nth-last-child(even) { // 指定样式 }
接下来，我们在示例中将所有第奇数个列表项目的背景色设为黄色，将所有第偶数个列表项目的背景色设为浅蓝色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>使用nth-child对第奇数个、第偶数个子元素使用不同样式示例</title> <style type="text/css">li:nth-child(odd) { background-color: yellow; } li:nth-child(even) { background-color: skyblue; } </style> </head> <body> <h2>列表A</h2> <ul> <li>列表项目1</li><li>列表项目2</li><li>列表项目3</li><li>列表项目 4</li><li>列表项目5</li> </ul> </body> </html>
另外，使用nth-child选择器与nth-last-child选择器时，虽然在对列表项目使用时没有问题，但是当用于其他元素时，还是会出现问题。
