以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。
示例代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>CSS 高级选择器使用</title> <style> * { padding: 0; margin: 0; } /*IE8不支持 IE9支持*/ li:nth-child(3n+1) { color: red; } /*IE7+以上浏览器均支持*/ li:first-child { color: blue; } /*IE8不支持 IE9以上支持*/ li:last-child { color: green; } /*IE8不支持 IE9以上支持*/ li:nth-of-type(odd) { color: #8D8D8D; } /*IE8不支持 IE9以上支持*/ li:first-of-type { color: #92B8B1; } /*IE8不支持 IE9以上支持*/ li:last-of-type { color: #2E2D3C; } </style> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> </ul> </body> </html>
总结：
除了first-child选择器兼容IE7+以上外，其他选择器均需要IE9以上浏览器才能兼容。