Question

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

隐藏下面的<h1> div标记时，yui-ge标记可见。如果＆gt;仅适用于直系孩子我的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元素中没有类sites或default并且是.woot元素的子元素的所有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的DIV。

Answer 2

如果你隐藏了一个元素，它的所有子元素也会被隐藏。

CSS直接子选择器

2 个答案: