使用:nth-child和:hover伪类可实现表格隔行变色与悬停高亮，提升可读性和交互性，无需javaScript。

在css中，可以通过伪类选择器为表格的行（tr）添加交替样式或悬停效果，提升可读性和交互体验。最常用的方式是使用 :nth-child 和 :hover 伪类。

1. 实现隔行变色（斑马条纹）

使用 :nth-child(even) 或 :nth-child(odd) 为表格的偶数行或奇数行设置不同背景色。

示例代码：

 table {   width: 100%;   border-collapse: collapse; } <p>tr:nth-child(even) { background-color: #f2f2f2; }</p><p>tr:nth-child(odd) { background-color: #ffffff; }</p>

这样可以让用户更容易横向阅读数据，减少看错行的可能。

2. 鼠标悬停高亮行

通过 :hover 伪类，当鼠标移到某一行时，动态改变其背景颜色。

立即学习“前端免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

示例代码：

 tr:hover {   background-color: #cce5ff;   cursor: pointer; } 

这个效果常用于可点击的表格行，提示用户当前选中的是哪一行。

3. 结合使用实现更丰富的效果

可以将 :nth-child 和 :hover 同时使用，既保持隔行配色，又在悬停时统一高亮。

示例代码：

 /* 偶数行灰色 */ tr:nth-child(even):not(:hover) {   background-color: #f2f2f2; } <p>/<em> 悬停时所有行都变为蓝色调 </em>/ tr:hover { background-color: #cce5ff; }</p>

注意：如果同时设置了多个背景色规则，后定义的规则会覆盖前面的，注意CSS优先级。

基本上就这些。合理使用伪类能让表格更清晰、更具交互性，而且无需javascript或额外class。关键是理解伪类的作用范围和层叠顺序。不复杂但容易忽略细节。

以上就是如何通过