仅使用CSS悬停一行悬停，如何制作行的最后一个TD以突出显示

Question

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

http://jsbin.com/isukemih/2/edit

我尝试按照方式

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;
}