基于没有类的祖先的 CSS 选择器答案

【问题标题】：CSS selector based on ancestors not having a class基于没有类的祖先的 CSS 选择器
【发布时间】：2019-06-17 07:37:37
【问题描述】：

我想根据祖先中不存在的另一个类来设置一个类的样式。

div:not(.evil-class) .element {
  background-color: green;
}

<div class="evil-class">
  <div class="element">An element within the evil class</div>
</div>

<div class="element">An element NOT in the evil class</div>

不知道为什么这不起作用？

我知道我可以反其道而行之；将样式应用于两个元素，然后覆盖该样式，但我宁愿不这样做，因为我会覆盖可能在第三方库中更改的样式。

谢谢。

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

div:not(.evil-class) .element 的意思是“具有类 element 的东西是来自不具有类 evil 的 div -class"

您的元素不是 any div 的后代，因此 div:not(.evil-class) 不匹配任何祖先（在这种情况下仅是 <body> 和 <html>）。

目前没有办法在 CSS 中表达“所有祖先都没有特定的类”。

Selectors Level 4 建议允许:not() 包含复杂的选择器，因此将来您可以执行以下操作：

.element:not(div.evil-class *) {
  background-color: green;
}

<div class="evil-class">
  <div class="element">An element within the evil class</div>
</div>

<div class="element">An element NOT in the evil class</div>

浏览器支持目前为almost non-existent，但上面的演示适用于当前版本的Safari。

【讨论】：

谢谢！然而，这个问题仍然存在于我的真实项目中，它上面肯定有很多 div（附截图）。无论如何，您按原样回答了问题，因此将标记为正确
@Dominic — 再看一下这个答案的第一句话。 div:not(.evil-class) 只需匹配一个的祖先，即div 和:not(.evil-class)。这并不意味着每个 div 都不能有那个类。