CSS直接子选择器

Question

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

的<h1>同时,下面的标签是可见的yui-gediv标签是隐藏的.如果>仅适用于直系孩子,我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>

更新

看这里: - 取消链接 -

单击"Woot"选项卡....默认的woot选项卡上没有显示结果 - 它们保持隐藏状态.

Answer 1

你有这个CSS规则:

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

此规则适用于#main元素内的所有DIV ,它们没有类sites或者default是.woot元素的子元素.

你的结构是:

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

正如你所看到的,.yui-geDIV没有阶级sites,也没有default,这是一个内部.woot元素.因此,它将被隐藏.

问题是你在祖先链中有两个拥有该类的DIV woot.