Html 如何更改悬停时td的td背景色

我的项目中有一个表。此表的每个

td

都有初始

背景色：#fafafa

这是我的密码：

<style>
    .uTbId tr td:hover {
        background-color: #0000CD;
        color: green;
    }
</style>
<table class="uTbId" border="1" cellspacing="0" style="width:100%;margin-top:30px" bordercolor="lightgray">
    <tr>
        <td style="position:absolute;width:100px;background-color:#fafafa">
            <input type="checkbox" id='Tom' />Tom</td>
    </tr>
</table>

我很困惑，似乎没什么不对。我无法删除项目中的td初始背景色

---

有人能帮我吗？

添加！对悬停时的背景色很重要

background-color:#0000CD !important

由于您将样式添加为内联样式，因此您提供的白色背景优先，因此您会得到此错误。添加！重要的修复此

---

Codepen链接：

在css本身中设置默认的

背景色，否则只能使用内联样式

演示


.uTbId tr td{
背景色：#fafafa；
颜色：绿色；
}
.uTbId tr td：悬停{
背景色：#0000CD；
颜色：绿色；
}

汤姆
这是一段代码，您可以在鼠标悬停在td为您提供的任何背景色上的位置进行检查。



汤姆
表1.uTbId tr>td：悬停{
背景色：#0000CD；
}
CSS的特殊性阻止了这一点，因为样式标记比给定的CSS样式更具体。这里的答案建议
！重要信息
，但我建议您不要使用它，除非绝对必要。只要给你的
td
上一节课，你就会完成

<style>
  .uTbId td.check {
    position: absolute;
    width: 100px;
    background-color: #fafafa
  }

  .uTbId td.check:hover {
        background-color: #0000CD;
        color: green;
  }

</style>
<table class="uTbId" border="1" cellspacing="0" style="width:100%;margin-top:30px" bordercolor="lightgray">
    <tr>
        <td class="check">
            <input type="checkbox" id='Tom' />Tom</td>
    </tr>
</table>


.uTbId td.check{
位置：绝对位置；
宽度：100px；
背景色：#fafafa
}
.uTbId td.检查：悬停{
背景色：#0000CD；
颜色：绿色；
}
汤姆
您可以使用
覆盖它！重要信息
在样式表中，但我认为将样式的一部分内联定义并将其一部分放在样式表中（对于同一元素）并不理想。如果两者都在样式表中，您就不会有这个问题
background-color:#0000CD !important

.uTbId tr td {
  background-color: #fafafa;
  color: green;
}

<style>
  .uTbId td.check {
    position: absolute;
    width: 100px;
    background-color: #fafafa
  }

  .uTbId td.check:hover {
        background-color: #0000CD;
        color: green;
  }

</style>
<table class="uTbId" border="1" cellspacing="0" style="width:100%;margin-top:30px" bordercolor="lightgray">
    <tr>
        <td class="check">
            <input type="checkbox" id='Tom' />Tom</td>
    </tr>
</table>