Verwenden Sie: nicht Selektor, um ein Div und alle seine Nachkommen auszuschließen

Question

Ich habe eine Situation, wo ein Stil der lila Schriftfarbe mit einem hellgelben Hintergrund auf alle divs außerhalb einer div mit einer Klasse von RadDiv angewendet werden muss.

Das bedeutet, dass alle Divs, die innerhalb des div mit der Klasse RadDiv verschachtelt sind, ausgeschlossen werden sollten.

Ich habe versucht mit :not Selektor wie unten gezeigt, aber es funktioniert nicht. Demo of my situation

Frage: Wie würde ich den :not Wähler geben Sie einen div mit einer Klasse von RadDiv und alle verschachtelten divs in diesem div auszuschließen?

: nicht Wähler, die nicht

div:not(.RadDiv) div { 
    background-color:lightyellow; 
    color:purple; 
    } 

kompletten Code, den ich

<div>This is a div </div> 
<div class="RadDiv newDiv outerDiv"> 
    <div class="header"> 
     This is the header 
    </div> 

    This is an outer div 

    <div class="alert highlight"> 
     This div stands out 
    </div> 
    <div class="footer disclaimer"> 
    This is the footer part 
    </div> 
    <table> 
     <tr> 
     <td> 
     <div>This is div inside a table element</div> 
     </td> 
     </tr> 
    </table> 
</div> 
<div id="div1">This is div1</div> 
<div id="div2">This is div2</div> 
<style> 
div:not(.RadDiv) div { 
    background-color:lightyellow; 
    color:purple; 
    } 
    .outerDiv { 
     border:1px solid red; 
     font-family:Arial; 
    } 
    .footer { 
    color:lightgray; 
    font-size:small; 
    font-style:italic; 
    } 
    .header { 
    font-weight:bold; 
    } 

Answer 1

behandeln alle divs der gleichen Ebene wie die Geschwister. Daher starten, indem die übergeordnete Auswahl:

body > div:not(.RadDiv) { 
    background-color: lightyellow; 
    color: purple; 
} 

Mit dem Kind combinator (>), nur eine Ebene richtet, und der :not kann Selektor verwendet werden, um jede Geschwister auszuschließen (einschließlich ihrer Nachkommen).

Revised Fiddle

Referenzen:

• 6.6.7. The negation pseudo-class
• 8.2. Child Combinators

Answer 2

versucht funktionieren: nicht ist Wähler nicht so mächtig und es so nicht funktioniert möchte es in komplizierteren Situationen. Der einfachste Weg, um zu erreichen, was Sie wollen wahrscheinlich .RadDiv Arten außer Kraft zu setzen sein:

div { 
    background-color:lightyellow; 
    color:purple; 
    } 
.RadDiv, .RadDiv div { 
    background: transparent; 
    color: black; 
}