CSS即時子セレクタ

Question

#main .container > div:not(.sites):not(.default) { 
    display: none; 
} 

yui-ge divタグが非表示になっていますが、タグが表示されています。 >が直属の子供にのみ適用される場合、私のyui-geが上記のCSSを（ChromeとFirefoxの両方で）どのように適用しているのか

<div class='container'> 
    <div class='default selected'> 
     <h1>Page Title</h1> 
     <div class='yui-ge'> //for some reason, this tag remains hidden cause of the above CSS 
      //more div tags 
     </div> 
    </div> 
    //more HTML here 
</div> 

更新

ここを見て：--link REMOVED--

は結果がデフォルトで表示されません.... "Woot" タブをクリックしてタブをwoot - 彼らは隠されたまま。

Answer 1

あなたはこのCSSルールを持っている：

#main .woot > div:not(.sites):not(.default) { 
    display: none; 
} 

この規則は、クラスsitesまたはdefaultを持っていると.woot要素の子であるしていない#main要素内のすべてのdiv要素に適用されます。

あなたの構造は次のとおりです。

<div id="main"> 
    <div class="woot"> 
     <div class="woot default selected"> 
      <div class="yui-ge"> ... </div> 
     </div> 
    </div> 
</div> 

あなたが見ることができるように、.yui-ge DIVがクラスsitesもdefaultを持っていないと、それは.woot要素の内部にあります。したがって、それは隠されます。

---

問題は、クラスwootを持つ祖先チェーンで2つのdiv要素を持っているということです。

Answer 2

要素を非表示にすると、すべての要素が非表示になります。