以下示例主要講解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 高級(jí)選擇器使用</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>
總結(jié)：除了first-child選擇器兼容IE7+以上外，其他選擇器均需要IE9以上瀏覽器才能兼容。
作者：王翔 QQ：592767079 Email：wangxianglengye.com 期待共同進(jìn)步！
