html table奇偶行颜色设置 (CSS选择器)

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

下面的例子, 设置表格的奇偶行背景颜色不同；单独设置表格的第1列背景颜色不同。

 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4         <style type="text/css"> 
 5             table{
 6                 height: 200px;
 7                 width:400px;
 8                 border:2px solid  green;
 9             }
10             
11             td{
12                 border:1px solid;
13             }
14             
15             tr:nth-child(2n){
16                 background:#00CCCC;
17             }
18             
19             tr td:nth-child(1){
20                 background:#FFCCCC;
21             }
22         </style>  
23     </head> 
24     <body>
25         <table>
26             <tr>
27                 <td>1</td> <td>2</td> <td>3</td>
28             </tr>
29             <tr>
30                 <td>1</td> <td>2</td> <td>3</td>
31             </tr>
32             <tr>
33                 <td>1</td> <td>2</td> <td>3</td>
34             </tr>
35             <tr>
36                 <td>1</td> <td>2</td> <td>3</td>
37             </tr>
38         </table>
39     </body>
40 </html>

效果: