2014-09-23 45 views
0

爲什麼我不能做div:not(.wrapper2 .exception)? IE瀏覽器。除.wrapper2 .exception以外的所有div。無法執行`:not(.foo .bar)`

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; 
} 
+0

不清楚你在問什麼。除了'.wrapper2 .exception',或'.wrapper2'和'.exception'之外,你想要的是嗎? – Scimonster 2014-09-23 12:13:46

+0

嗨!所有div除'.wrapper2 .exception'是的。謝謝。更新的問題。 – 2014-09-23 12:15:34

+1

這解釋了原因:http://stackoverflow.com/questions/7403129/combining-not-selectors-in-css/7403148#7403148 – 2014-09-23 12:20:03

回答

3

不能合併not()選擇這樣的,在同一時間只有一個選擇可以去

選擇除.exception之外的所有div:

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

你怎麼知道OP不打算只適用於最後'div',它是'.wrapper2 .exception'。 – Scimonster 2014-09-23 12:13:03

+0

你說得對,我誤解了這個問題。更新我的答案 – 2014-09-23 12:16:01

+0

http://jsfiddle.net/4swjmhtr/2/現在它只針對第一個分區 – fcalderan 2014-09-23 12:18:03

3

如果你的目標是除最後一個以外的所有子div,這就是需要的。

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>

相關問題