CSS 样式(如果不是子项)

Question

如果特定类不是元素的子元素，我需要将样式应用于元素。

<table class="printlist" style="width:100%">
  <tbody>
    <tr class="list_wanted0"><td>Whatever...</td></tr>
    <tr class="list_wanted1"><td>
      <div class="journal">
        <table><tbody>
          <tr><td style="width: 9em">2011-03-12 09:36</td></tr>
        </tbody></table>
      </div>
    </td></tr>
  </tbody>
</table>

为了演示结构，上面的示例被缩减到最少。

我想要的是 :Hover属性只适用.printlist tr如果<tr>有没有 .journal child 。

.list_wanted0和 .list_wanted1不能用于选择 .journal , 那里可以是其他类名。

我试过的CSS是:

.printlist tr:Hover * :not(itemjournal) {
  color: #000;
  background: #aaa
}

显然，这并没有像我预期的那样工作。

如果您需要更多信息，请随时询问，
谢谢。

Answer 1

单独使用 CSS 选择器是不可能的；你不能使用 CSS 来确定一个元素是否有某种子元素。最好的办法是使用 JavaScript 来应用类，并相应地设置这些类的样式。

使用 jQuery-only :has() selector 的示例:

$('.printlist tr').not(':has(.journal)').addClass('nojournal');

然后将样式应用于 .printlist tr.nojournal:hover。