使用:nth-child和:hover伪类可实现表格隔行变色与悬停高亮，提升可读性和交互性，无需JavaScript。
在CSS中，可以通过伪类选择器为表格的行（tr）添加交替样式或悬停效果，提升可读性和交互体验。最常用的方式是使用 :nth-child 和 :hover 伪类。
使用 :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>这样可以让用户更容易横向阅读数据，减少看错行的可能。
通过 :hover 伪类，当鼠标移到某一行时，动态改变其背景颜色。
立即学习“前端免费学习笔记（深入）”；
示例代码：
tr:hover {
background-color: #cce5ff;
cursor: pointer;
}
这个效果常用于可点击的表格行，提示用户当前选中的是哪一行。
可以将 :nth-child 和 :hover 同时使用，既保持隔行配色，又在悬停时统一高亮。
/* 偶数行灰色 */
tr:nth-child(even):not(:hover) {
background-color: #f2f2f2;
}
<p>/<em> 悬停时所有行都变为蓝色调 </em>/
tr:hover {
background-color: #cce5ff;
}</p>注意：如果同时设置了多个背景色规则，后定义的规则会覆盖前面的，注意CSS优先级。
基本上就这些。合理使用伪类能让表格更清晰、更具交互性，而且无需JavaScript或额外class。关键是理解伪类的作用范围和层叠顺序。不复杂但容易忽略细节。
以上就是如何通过css实现表格行伪类效果的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
762
收藏
