對於CSS3的結構偽類選擇器，為了更好地讓剛剛學習CSS3教程的新手能夠理解，我把它們劃分為了3大類。這一節，我們先來給大家講解一下第1類結構偽類選擇器。
這些結構偽類選擇器都很好理解，下面我們通過幾個實例讓大家感受一下這些選擇器的用法。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3結構偽類選擇器</title>
<style type="text/css">
*{padding:0;margin:0;}
ul
{
display:inline-block;
width:200px;
list-style-type:none;
}
ul li
{
height:20px;
}
ul li:first-child{background-color:red;}
ul li:nth-child(2){background-color:orange;}
ul li:nth-child(3){background-color:yellow;}
ul li:nth-child(4){background-color:green;}
ul li:last-child{background-color:blue;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
在浏覽器預覽效果如下：
分析：
想要實現同樣的效果，很多人想到在li元素加上id或class屬性來實現。但是這樣會使得HTML結構id和class泛濫，不便於維護。使用結構偽類選擇器，使得我們HTML結構非常清晰，結構與樣式分離，便於維護，也更利於SEO。
上面這種使用結構偽類選擇器的地方非常多，特別適合操作列表中列表項的不同樣式。例如 學習網首頁的“helicopter的博客”列表中，列表項的排序數字背景顏色的不同就是使用結構偽類選擇器來實現的。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3結構偽類選擇器</title>
<style type="text/css">
*{padding:0;margin:0;}
ul
{
display:inline-block;
width:200px;
border:1px solid gray;
list-style-type:none;
}
ul li
{
height:20px;
background-color:green;
}
/*設置偶數列顏色*/
ul li:nth-child(even)
{
background-color:red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
在浏覽器預覽效果如下：
分析：
隔行換色這種效果也很常見，例如表格隔行換色、列表隔行換色等，這些也是用戶體驗非常好的設計細節。其中 學習網就用到了:nth-child()這個結構偽類選擇器對列表進行隔行換色設置。