div:not(.evil-class) .element
means "Something with the class element that is descended from a div which does not have the class evil-class"
Your element is not descended from any div, so div:not(.evil-class)
doesn't match any of the ancestors (which are only <body>
and <html>
in this case).
There is currently no way to express "None of the ancestors have a specific class" in CSS.
Selectors Level 4 proposes allowing :not()
to contain complex selectors so in the future you may be able to do something like:
.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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…