CSS selector based on ancestors not having a class

问题

I would like to style a class based on another class not existing in the ancestors.

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>

Not sure why that doesn't work?

I'm aware I can do the inverse; apply a style to both elements and then overwrite that style, but I'd rather not do that as I'd be overwriting styling which could change in a third party lib.

Thanks.

回答1:

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>

Browser support is currently almost non-existent, but the demo above works in current versions of Safari.

来源：https://stackoverflow.com/questions/54331892/css-selector-based-on-ancestors-not-having-a-class

标签

html

css

css-selectors