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。

.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。

Answer 2

是的，不幸的是，您需要使用基于javascript的解决方案，例如BoltClock建议的jQuery，特别是如果您希望CSS样式在浏览器中保持一致，考虑到并非所有浏览器都实现完整的CSS标准规格。

如果您仍想继续使用CSS，请尝试查找哪些浏览器/版本支持哪些类型的CSS选择器的备忘单表。

Answer 3

我让它工作

我以为我会回答我自己的问题并提出我的纯CSS解决方案。

解决方案是创建两个类并将它们组合在<tr>

中

<table class="printlist" style="width:100%">
  <tbody>
    <tr class="list_wanted0 list_hover"><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>

我只需要添加一个悬停类：

.list_hover:Hover {
  color: #000;
  background: #aaa
}

在需要悬停的所有<tr>行上，我将我喜欢的任何类与.list_hover类合并，并将其从.journal行中排除。

现在它完全符合预期。谢谢你的帮助。

CSS样式，如果不是孩子

3 个答案:

我让它工作