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>




效果:




可以参考:


http://www.w3school.com.cn/cssref/selector_nth-child.asp






        

        

            posted on 
2018-01-06 11:37 
旭东的博客 
阅读(21340) 
评论(0) 
编辑 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    





            

        

        

            

导航