Question

我是新手，我有一个关于CSS3的问题：空伪类。

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

#my_sidebar:empty { display:none;}

为了显示它不是空的时候我写了

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

这是有效的，但是只有在页面上或链接上点击后，侧边栏才会显示。为什么？有人能帮助我吗？

谢谢！（请原谅我的英语！）

编辑： 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;
}

Answer 1

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

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

CSS3：空伪类

1 个答案: