Question

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

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>

不确定为什么不起作用吗？

我知道我可以逆转；对两个元素都应用样式，然后覆盖该样式，但是我不愿意这样做，因为我将覆盖可能在第三方库中更改的样式。

谢谢。

Answer 1

div:not(.evil-class) .element的意思是“类 element 是是的子类，该类是 div 的子类，而该类没有类邪恶级”

您的元素不是从 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的当前版本中有效。

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

1 个答案: