Css 用TR:hover覆盖TD:first子对象？

我有一个表格，第一个单元格有不同的背景。应用TR:hover时，这些单元格不会更改

当行悬停时，是否有方法覆盖它们

#spreadsheet TABLE, #spreadsheet TH, #spreadsheet TD { 
  border:1px solid #CCC;
}

#spreadsheet TABLE TR:hover { 
  background:#BAFECB !important;
}

#spreadsheet TD:first-child { 
  background:#fff; 
  white-space:nowrap; 
}

试一试

是的，它起作用了

---

代码：

问题在于td元素嵌套在tr元素中，这意味着td的背景将“高于”tr的背景

要让

td

s“释放”其背景，您至少有两个选项：

一个：
使用

：not（）

伪选择器，仅当用户未悬停在

tr

上时，才可以设置

td

的背景。这样做的缺点是，如果您使用例如

两个：
将

td

的父项

tr

悬停在上方时，将其背景色设置为透明

table td:first-child {
    background-color: #eee;
}

table tr:hover td:first-child {
    background-color: transparent;
}

table tr:hover {
    background-color: yellow;
}

---

与Samich的解决方案相比，这些解决方案的优势在于，在父元素的背景不是纯色（例如图形、渐变色等）的情况下，也可以使用该解决方案。

在没有任何颜色的情况下也可以使用！也很重要@杰瑞加丘：问题不在于

！重要信息

，它与

tr

和

td

一起出现。你不需要

！重要信息

，谢谢。我觉得我现在更了解这个问题了。我感谢你花时间做一个彻底的解释！

table tr:not(:hover) td:first-child {
    background-color: #eee;
}

table tr:hover {
    background-color: yellow;
}

table td:first-child {
    background-color: #eee;
}

table tr:hover td:first-child {
    background-color: transparent;
}

table tr:hover {
    background-color: yellow;
}