使用:nth-child和:hover伪类可实现表格隔行变色与悬停高亮，提升可读性和交互性，无需JavaScript。
在CSS中，可以通过伪类选择器为表格的行（tr）添加交替样式或悬停效果，提升可读性和交互体验。最常用的方式是使用 :nth-child 和 :hover 伪类。
1. 实现隔行变色（斑马条纹）
使用 :nth-child(even) 或 :nth-child(odd) 为表格的偶数行或奇数行设置不同背景色。
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
这样可以让用户更容易横向阅读数据，减少看错行的可能。
2. 鼠标悬停高亮行
通过 :hover 伪类，当鼠标移到某一行时，动态改变其背景颜色。
立即学习“前端免费学习笔记（深入）”；
示例代码：
tr:hover {
background-color: #cce5ff;
cursor: pointer;
}
这个效果常用于可点击的表格行，提示用户当前选中的是哪一行。
3. 结合使用实现更丰富的效果
可以将 :nth-child 和 :hover 同时使用，既保持隔行配色，又在悬停时统一高亮。
/* 偶数行灰色 */
tr:nth-child(even):not(:hover) {
background-color: #f2f2f2;
}
/ 悬停时所有行都变为蓝色调 /
tr:hover {
background-color: #cce5ff;
}
注意：如果同时设置了多个背景色规则，后定义的规则会覆盖前面的，注意CSS优先级。
基本上就这些。合理使用伪类能让表格更清晰、更具交互性，而且无需JavaScript或额外class。关键是理解伪类的作用范围和层叠顺序。不复杂但容易忽略细节。
