HTML：具有不同颜色的所有单元格的悬停效果

Question

是否可以为具有不同颜色的所有表格单元格提供相同的悬停效果？

td:hover {
    background-color:black;
    color:white;
}

<td style="background-color:yellow;">
<td style="background-color:red;">

悬停效果不起作用。

然后我尝试使用#id为每个单元格指定不同的单元格颜色，仍然悬停效果不起作用。

  

来自w3schools：悬停必须来：链接和：访问（如果他们是   现在）在CSS定义中，为了有效！

我已经把链接放在了悬停之后。

我有什么想念吗？

谢谢！

Answer 1

使用!important覆盖 - 因为您使用了内联style=""

background-color: black !important;

或而非使用类：

＆＃13;

＆＃13;

.yellow{
  background-color: yellow;
}
.red{
  background-color: red;
}

td:hover {
  background-color: black;
  color: white;
}

＆＃13;

<table>
  <tr>
    <td class="yellow">YELLOW</td>
    <td class="red">RED</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

因为内联样式无论如何都是设计不佳的标志。

Answer 2

  

style tag和inline attribute之间的重要区别是特异性。特异性决定了一种风格何时覆盖另一种风格。通常，内联样式具有更高的特异性。

     

参考：https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

内联样式比CSS样式表更高Specificity，因此必须使用！important来覆盖它。

OR

AS @Roko C. Buljan回答，使用类而不是内联样式可以避免这种问题，建议这样做。

＆＃13;

＆＃13;

td:hover {
  background-color: black !important;
  color: white;
}

＆＃13;

<table>
  <td style="background-color:yellow;">111</td>
  <td style="background-color:red;">222</td>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

而不是为表格添加内容，请尝试使用类。