Question

我的代码如下：

＆＃13;

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

＆＃13;

<table class="outer">
  <tr>
    <td>
      <table class="inner">
        <tr>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <table class="inner">
        <tr>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
    <td></td>
  </tr>
</table>

＆＃13;

主要问题是，当我将我的内部table td悬停时，会显示绿色。如果我使用普通rgb()或十六进制颜色，问题可能无法到达。我有目的地需要透明度。帮助我，以便我的内心td在我的悬停时不会变成绿色。

每行td都有类名。我使用ajax使用jquery操作使用类名。所以，我无法改变类名。这不是我的实际表格。如果我必须使用他们的班级名称将css应用于我的所有td，那么这将使我的客户成为＆＃39;浏览器有一段时间加载。请帮助我使用css编码忽略父母的样式。或者找到一种方法来样式化table而不是其子table。谢谢。

Answer 1

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

inner表位于outer表内，这意味着

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

将鼠标悬停在<td>内的.inner上时，

仍然有效。您还需要覆盖.inner tr td:hover以撤消.outer tr td:hover完成的颜色更改：

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

Answer 2

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}

th{
    background: #3d3d3e;
    color:#fff;
}

FIDDLE

http://jsfiddle.net/5fxku4wb/2/

Answer 3

虽然已经提供了答案，但我认为您应该了解CSS Cascades。使用:not可以排除内部类继承外部类CSS。例如：

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

如何在不使用div标签的情况下对内外表的td进行样式化？

3 个答案: