Html 如何在不使用div标记的情况下设置内外表的td的样式？

我的代码如下所示：

.outer tr td{
背景色：rgba（255,0,0,0.5）；
/*红色的*/
}
.内部tr td{
背景色：rgba（0,0,255,0.5）；
/*蓝色的*/
}
.外部tr td：悬停{
背景色：rgba（0,255,0,0.25）；
/*绿色的*/
}

---

如果我正确理解了你的问题

内部

表位于

外部

表的内部，这意味着

.outer tr td:hover {
  background-color: rgba(0, 255, 0, 0.25);
  /*green*/
}

将鼠标悬停在

.internal

中的

上时仍然有效。您需要覆盖

。内部tr td:hover

以及撤消

所做的颜色更改。外部tr td:hover

：

.inner tr td:hover {
  background-color: rgba(0, 0, 255, 0.5);
  /*blue*/
}

拨弄

---

虽然已经给出了答案，但我认为您应该了解CSS级联。使用可以从继承外部类CSS中排除内部类。例如：

.outer tr td:not(.inner):hover {
    background-color: rgba(0, 255, 0, 0.25);
    /*green*/
}

---

我想这会解决我的问题。我必须覆盖我的外部表格设置。非常感谢。我从洛切梅奇那里得到了答案。这不是我想要的答案。无论如何，感谢你的提议，Manjunath Siddappa…我的客户不会使用与CSS3兼容的浏览器。所以我更喜欢Lochemage的anwser。谢谢你的回答。

.outer tr td:not(.inner):hover {
    background-color: rgba(0, 255, 0, 0.25);
    /*green*/
}