CSS3：空的伪类答案

【问题标题】：CSS3 :empty pseudo classCSS3：空的伪类
【发布时间】：2012-05-01 00:42:51
【问题描述】：

我是新手，我有一个关于 CSS3 和 :empty 伪类的问题。

我创建了一个 Web ajax 应用程序。在我的页面布局中，我有一个侧边栏，如果为空，我想隐藏它。所以我写道：

#my_sidebar:empty { display:none;}

当我写的不是空的时候显示它

#my_sidebar:not(:empty) { display:block; }

这是可行的，但对于 chrome，侧边栏仅在单击页面或链接后才会出现。为什么？有人可以帮我吗？

谢谢！（对不起，我的英语很糟糕！！）

编辑： html页面：

    <body id='body'>

<!-- Header -->
<header id="top" class="cf">
    <div id="branding">
        <h1><a href=" " onClick="presenter.homepage()">Project Management</a></h1>
    </div>
    <nav id="nav-user">
        <ul>
          <li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
          <li><a id="company" href="azienda">Azienda</a></li>
          <li><a id="logout" href="logout">Logout</a></li>
        </ul>
    </nav>
    <nav id="nav-main">
        <ul class="cf">
         <li>
            <button id="back" onClick="javascript: history.back();" href="#" />&larr;</button></li>
        </ul>
       <!--popup con task finiti -->
        <div id="task-ended" class="cf">
          <div class="triangle-border top">
          <div class="clear"></div>
        </div>

    </div><!--task-ended-->
    <!--popup con task finiti -->
  </nav>
</header>

<!-- Main Body -->
<div id="container" class="cf">
    <div id="loading" style="display:none"><img src="images/loading.gif" /></div>
    <div id="my_sidebar" class="sidebar"></div>
    <div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">

Mentis Project Management 
</footer>
</body>

和css：

.sidebar {
 float:right;
 width: 36%;
 text-align:left;
}

【问题讨论】：

我们需要查看更多代码，甚至是您的页面。
嗯，Chrome 至少有 one problem with the :empty pseudo selector。
这个jsfiddle.net/WUJ3b 似乎工作正常。即使在 chrome 中
但是如果我动态添加一个元素，它就不起作用（在我的情况下，只有在点击鼠标后才起作用）jsfiddle.net/2BFLa
在某些浏览器中，css属性：“display”必须从html标记手动设置，例如：
。可以试试这个：
.

标签： google-chrome css css-selectors

【解决方案1】：

Chrome 错误显然只发生在display 属性上，因此您可以改为设置visibility: hidden; 使其不可见，并设置position: absolute; 以防止保留空间。这不需要使用:not(:empty)。

与往常一样，每当您发现自己将浏览器推向极限时，请停下来问问自己是否有更简单的方法来完成这项工作。根据您的需要，对 jQuery 的 show() 和 hide() 方法的简单调用也可以正常工作。 :)

【讨论】：