: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>

效果:

评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Html 列表 li ul使用