CSS悬停特异性问题

Question

我的表格的第一行样式如下：

.Table1 tr:first-child td { ... }

我还希望在这一行的一部分有悬停样式，我已经尝试将这两个作为下一个规则，但它们都不起作用：

.Table1 tr:first-child:hover td { ... }
.Table1 tr:first-child td:hover { ... }

它们都可以部分工作 - 行中的某些td单元格没有内容，并且类为emptyColumn，这些单元格做已应用悬停样式他们（但仅限于造型为!important）。但是，具有文本内容的单元格不样式。

从我（非常）有限的特殊性理解来看，如果第一条规则确实有效，那么第二条规则也应该有效，因为它更具体吗？是否有其他东西可以阻止它的运作？

但是，我真正需要的是与此略有不同。我只希望悬停在td中的某些tr单元格上工作，并且我已经为这些单元格提供了一类colHeaderButton：

td.setAttribute('class', 'colHeaderButton');

我找不到使用类名称应用hover样式的方法 - 我尝试了各种组合，例如

.Table1.colHeaderButton tr:first-child td:hover { ... }

但我无法使用其中任何一项。感谢。

Answer 1

td是班级的成员，而不是table。

.Table1 tr:first-child td.colHeaderButton:hover