Невозможно выполнить `: not (.foo .bar)`

Question

Почему я не могу сделать div:not(.wrapper2 .exception)? То есть. все divs кроме .wrapper2 .exception.

http://jsfiddle.net/frank_o/4swjmhtr/

HTML:

<div class="wrapper1"> 
    <div> 
     <p>Hi</p> 
    </div> 
    <div class="exception"> 
     <p>Hi</p> 
    </div> 
</div> 
<div class="wrapper2"> 
    <div> 
     <p>Hi</p> 
    </div> 
    <div class="exception"> 
     <p>Hi</p> 
    </div> 
</div> 

CSS:.

div:not(.wrapper2 .exception) { 
    background: blue; 
    color: white; 
} 

Answer 1

Вы не можете комбинировать not() селекторов, как это, только один селектор может одновременно идти в

Чтобы выбрать все divs, кроме .exception внутри .wrapper2:

div:not(.wrapper2) div:not(.exception) 

Answer 2

Если вы ориентируетесь все дочерние Див за исключением последнего, это то, что нужно.

div > div { 
 
    background: blue; 
 
    color: white; 
 
} 
 
div.wrapper2 > div.exception { 
 
    background: none; 
 
    color: inherit; 
 
}

<div class="wrapper1"> 
 
    <div> 
 
     <p>Hi</p> 
 
    </div> 
 
    <div class="exception"> 
 
     <p>Hi</p> 
 
    </div> 
 
</div> 
 
<div class="wrapper2"> 
 
    <div> 
 
     <p>Hi</p> 
 
    </div> 
 
    <div class="exception"> 
 
     <p>Hi - not this one!</p> 
 
    </div> 
 
</div>