如何让表格td边框在:hover状态下正常变色？最后一行底部边框异常

你的问题出在：最后一行的td底部边框是通过.list-tr:last-child .list-td单独声明的，原有的.list-tr:hover > td选择器无法覆盖这个单独设置的border-bottom样式，同时最后一行没有下一行，.list-tr:hover + tr > td这个相邻兄弟选择器也派不上用场。

只需给最后一行的hover状态单独加个样式，就能解决问题：

修改后的CSS代码：

.list{
    table-layout:fixed;
    border-spacing:0;
}

.list-tr:hover > td{
    border-color:red;
}

.list-tr:hover + tr > td{
    border-top-color:red;
}

.list-td{
    border-top:1px solid blue;
}

.list-tr:last-child .list-td{
    border-bottom:1px solid blue;
}

/* 新增：处理最后一行hover时的底部边框 */
.list-tr:last-child:hover .list-td{
    border-bottom-color: red;
}

原理说明 #

• .list-tr:hover > td：让当前hover行的所有td边框变红，但因为最后一行的td底部边框被.list-tr:last-child .list-td单独指定了蓝色，优先级相同的情况下后声明的样式会生效，所以需要单独针对最后一行的hover状态重写底部边框颜色。
• .list-tr:hover + tr > td：处理hover行下方相邻行的上边框变红，保证行之间的边框颜色统一。
• 新增的.list-tr:last-child:hover .list-td：专门覆盖最后一行hover时的底部边框颜色，让它也变成红色。

这样修改后，鼠标悬停在任意一行（包括最后一行）时，该行的上下边框都会正确显示为红色。

内容的提问来源于stack exchange，提问作者clarkk