html水平线怎么用css变颜色,怎么使用css实现变色的单元格

单一的表格很容易使人感到枯燥，使用变色效果可以使得表格看起来更加舒适，在本文将为大家介绍下使用css实现隔行变色显示，感兴趣的朋友可以参考下。

怎么使用css实现变色的单元格

实现隔行变色可以使用css3的伪类选择器:nth-of-type(type)，当type的值为odd时，选中所有的奇数行，当type为even时，选中所有的偶数行。同时我们可以为个别td元素指定一个类或通过伪类:hover，设置不同的样式。(相关课程推荐：css视频教程)

示例：

tr:nth-of-type(odd) {

background-color: #ccc;

}

tr:nth-of-type(even) {

background-color: #eee;

}

td{

padding: 4px 8px;

}

td:hover{

background: pink

}

1	2	3	4
1	2	3	4
1	2	3	4
1	2	3	4

效果如下：

本文来自css3答疑栏目，欢迎学习！