废话少说,先看效果,如果不是你想要的,你可以撤了~
table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73B1E0;color:#FFF;}
分别选择为:奇数行、偶数列、第五行,下面是完整代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Css3实现表格隔行变色或隔列变色</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>
主题测试文章,只做测试使用。发布者:小屋,转转请注明出处:http://www.rumenwu.com/site/1660.html