一旦仅使用css悬停一行，如何使行的最后td突出显示？

Question

我想突出显示该行悬停时的最后一个单元格。 是否有可能仅用CSS做到这一点。 这是工作链接。

我尝试了以下方法

tr:hover {
  background-color: #f00;
}

tr:last-child:hover {
  background-color: #f00;
}

Answer 1

使用此设置将悬停的行的最后一个单元格的背景颜色设为红色：

tr:hover td:last-child {
  background-color: #f00;
}

Answer 2

尝试这个

tr:hover td:last-child {
  background-color: #f00;
}

Answer 3

你有很多不错的选择

tr:hover td:last-child {
  background-color: red;
}

要么

tr:hover td:last-of-type {
  background-color: red;
}

要么

tr:hover td:nth-last-child(1){
    background:red;
}