<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css控制表格隔行变色</title> <style type="text/css"> #tb2 tr{ background-color: #fff0f5; } /*奇数行样式*/ #tb2 tr:nth-child(odd){ background-color: #fffafa; } #tb2 tr:hover{ background-color: #ffe4e1; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } /*奇数行样式*/ #tb2 tr:hover:nth-child(odd){ background-color: #fff8dc; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } </style> </head> <body> <table id="tb1" border="1" border-collapse="collapse" cellpadding="5" width="400" height="20" cellspacing="0" bordercolor="#99cccc"> <thead> <tr> <td>编号</td> <td>作品</td> <td>时间</td> </tr> </thead> <tbody id="tb2"> <tr> <td>1</td> <td>回忆三部曲</td> <td>1995</td> </tr> <tr> <td>2</td> <td>未麻的部屋</td> <td>1997</td> </tr> <tr> <td>3</td> <td>千年女优</td> <td>2001</td> </tr> <tr> <td>4</td> <td>妄想代理人</td> <td>2004</td> </tr> <tr> <td>5</td> <td>红辣椒</td> <td>2006</td> </tr> <tr> <td>6</td> <td>东京教父</td> <td>2003</td> </tr> </tbody> </table> </body> </html>