如何通过css实现表格行伪类效果

使用: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。关键是理解伪类的作用范围和层叠顺序。不复杂但容易忽略细节。