CSS直接子选择器

前端之家收集整理的这篇文章主要介绍了CSS直接子选择器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
#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选项卡上没有显示结果 – 它们保持隐藏状态.

解决方法

你有这个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没有类站点也没有默认值,它位于.woot元素内.因此,它将被隐藏.

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

猜你在找的CSS相关文章