CSS 直接子选择器

Question

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

<h1>标签可见，而下面的 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>

更新

看这里:--链接已删除--

单击“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-ge DIV 没有 sites 类，也没有 default 类，它位于 >.woot 元素。因此，它将被隐藏。

---

问题是您在祖先链中有两个 DIV，它们具有 woot 类。