精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

我们在制作表格或者新闻列表的时候,可能经常会用到隔行变色,并鼠标移动上去变色,以前都必须配合JS才可以实现,下面青岛星网跟大家分享纯CSS3实现table表格隔行变色并hover变色。

先看下效果图

关键CSS代码介绍

table tr:nth-child(odd){background:#F4F4F4;}
table td:nth-child(even){color:#C00;}
table tr:nth-child(5){background:#73B1E0;color:#FFF;}

代码介绍选择为:odd奇数行、even偶数列、第五行

扩展阅读:CSS3选择器nth-child的使用范例

下面直接给大家传演示范例,大家可以右键查看演示范例源代码即可。

就这么简单就实现了表格隔行变色,那么div li变色应该怎么写呢?我相信小伙伴应该也会了吧。

在线Demo预览

Tags:css table 隔行变色 hover
没有了
下一条:CSS3边框