1、首先会用到<tr></tr>元素两个伪类，nth-child()和hover。
然后需要注意的是伪类都是通过冒号引用的，不是点号，即tr:hover{}
其次，CSS代码中要注意顺序。
tr:nth-child(odd){ background-color:#CFF;} tr:nth-child(even){ background-color:#699;} tr:hover{ background-color:#F0C;}
写成这样是可以正常完成所需要的功能的，但是
如果你写成：
tr:hover{ background-color:#F0C;} tr:nth-child(odd){ background-color:#CFF;} tr:nth-child(even){ background-color:#699;}
那么很抱歉，hover的功能是不能实现的。只能实现奇偶行异色，不能实现悬浮变色。
以上两端代码的位移区别就是tr:hover这段代码的位置不一样。
以下是完整的代码：
<!DOCTYPE html> <html> <head> <title>表格奇偶行异色</title> <meta charset="utf-8"> <style type="text/css"> *{ margin:0px auto;} tr:nth-child(odd){ background-color:#CFF;} tr:nth-child(even){ background-color:#699;} tr:hover{ background-color:#F0C;} </style> </head> <body> <table> <tr> <td>第一行</td> </tr> <tr> <td>第二行</td> </tr> <tr> <td>第三行</td> </tr> <tr> <td>第四行</td> </tr> </table> </body> </html>
浏览器内运行截图：
这个时候鼠标悬停在第三行。