CSS是前端开发中不可或缺的一项技能,其中之一便是如何实现表格中的隔行变色。相信很多人都见过类似于这样的样式:
tr:nth-child(odd) { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #fff; }
上述代码用到了CSS3的选择器,其中:nth-child()
可以选择指定父元素下的第 n 个子元素。在这里我们将奇数行和偶数行的背景颜色分别设为 #f2f2f2 和 #fff,从而实现了隔行变色。
如果你的表格中不止有<tr>
元素,那么你可以为<tbody>
添加一个 class 名称,然后使用如下代码:
tbody tr:nth-child(odd) { background-color: #f2f2f2; } tbody tr:nth-child(even) { background-color: #fff; }
使用此方法能够兼容各类浏览器(IE9及以上),并且代码简洁清晰。希望本文能够对初学者们有所帮助!