纯CSS3代码实现表格奇偶行异色,鼠标悬浮变色
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>
浏览器内运行截图:
这个时候鼠标悬停在第三行。