javascript - CSS tr hover 不包括具有特定类的 tr

Question

我有一个表格，它在打开时由一些 JS 填充，作为其中的一部分，部分标题被赋予了整个表格的列跨度以及“部分”的类名。我通过 onmouseover 钩子(Hook)中的一个警报验证了这一点，该钩子(Hook)针对与类名相呼应的 tr 元素。类名肯定需要。

我有一些像这样的 CSS...

tr:hover {
    background-color: #FF9966
}
thead tr:hover, tr.section:hover {background-color: #DACFE5;!important}

翻转工作正常并排除了 thead child ，但我无法让它排除“部分”类 tr。

我需要在 CSS 中使用什么语法来实现这一点？

表格模板是...

<table id="myTable" border="1" class="indent">
  <thead>
    <tr> 
      <th colspan="3">Joe's Cafe Menu</th>
    </tr>
    <tr>
      <th>Select</th>
      <th>Item</th>
      <th>Price</th>
    <tr>
  </thead>
  <tbody>
  </tbody>
</table>

编辑:

问题是区分大小写。我猜是菜鸟错误。警告中回显了类名，但 CSS 引用的成员是类名。我修好了，现在好了。

这个 CSS 就像一个魅力...

tbody tr:not(.section):hover {
    background-color: #FF9966
}

由于我不明白的原因，这个 CSS 未能排除标题...

tr:not(.section):hover {
    background-color: #FF9966
}
thead tr:hover td {background-color: #DACFE5;}

这确实是学术性的，因为它有点 hack。

Answer 1


tr:not(.section):hover {
背景色:#FF9966
}