:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。
下面的例子, 设置表格的奇偶行背景颜色不同;单独设置表格的第1列背景颜色不同。
效果:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table{
height: 200px;
width:400px;
border:2px solid green;
}
td{
border:1px solid;
}
tr:nth-child(2n){
background:#00CCCC;
}
tr td:nth-child(1){
background:#FFCCCC;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
</table>
</body>
</html>