Question

使用chrome来检查我看到一些像这样的代码：

<div class="entry-content">
    <p>We .... </p>
</div>
<footer class="entry-footer">
                    </footer>

有时这个页脚是空的，而另一个则不是。

当它为空时我试着用以下方法隐藏它：

footer.entry-footer:empty {
display:none;
}

但它不起作用。

所以我要么做错了（或者我猜它不是空的！）

Answer 1

我为你做了一个快速test，看起来白色空间算作内容。在新行上开始结束标记将静静地插入换行符，这就是为什么你的选择器为：empty失败。

作为解决方案，您的html应如下所示：

<footer class="entry-footer"></footer>

因为开始和结束标记之间几乎没有任何内容，所以元素传递为:empty

Answer 2

:empty要求该元素也是空白的。

以下是example，.test.blue和.test.red有空格而不是display: none;（没有下面的JS，其中隐藏了.test.red） ...

如果你想删除空格后加载，这里有一些JS来做：

var empties = document.querySelectorAll( '[selector_here]' );
for ( key in empties ) {
    if ( typeof empties[key].innerHTML != "undefined" ) empties[key].innerHTML = empties[key].innerHTML.trim()
}

上面的JS修剪了与给定选择器匹配的任何元素的空白，在我的例子中我使用了类empty（你可以看到它在.test.red上工作）

但我建议将其从HTML中删除

使用css为空来隐藏元素

2 个答案: