:nth-child和:nth-of-type都是CSS3中的偽類選擇器，兩者作用類似,但仍有部分區(qū)別.
舉個(gè)例子：
對于p:nth-child(3) 和 p:nth-of-type(3)，被選中的元素需滿足的條件條分別為：
***p:nth-child(3) ***：該元素是父元素的第三個(gè)子元素，且元素類型為p。
***p:nth-of-type(3) ***：該元素是父元素的第三個(gè)類型為p的子元素。
一個(gè)簡單的應(yīng)用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格隔行變色或隔列變色</title>
<style>
body {
padding: 0;
margin: 0;
font: normal 12px/24px "\5FAE\8F6F\96C5\9ED1";
color: #444;
}
table {
width: 500px;
border: 0;
margin: 100px auto 0;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
}
table th {
background: #0090D7;
font-weight: normal;
line-height: 30px;
font-size: 14px;
color: #FFF;
}
table tr:nth-child(odd) {
background: #F4F4F4;
}
table td:nth-child(even) {
color: #C00;
}
table tr:nth-child(5) {
background: #73B1E0;
color: #FFF;
}
table tr:hover {
background: #73B1E0;
color: #FFF;
}
table td,
table th {
border: 1px solid #EEE;
}
</style>
</head>
<body>
<table>
<tr>
<th>xHTML+CSS</th>
<th>HTML5+CSS3</th>
<th>Javascript</th>
<th>jQurey</th>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
</table>
</body>
</html>
