:empty 选择器在 css 中不起作用答案

【问题标题】：:empty selector not working in css:empty 选择器在 css 中不起作用
【发布时间】：2013-08-21 05:50:22
【问题描述】：

我在.error 类中使用了:empty 选择器。问题是即使 div 中没有包含错误类的内容，错误类也不会完全删除。当我在 firebug 中测试时，我发现 div 仍然有一些空格，当我删除多余的空格时，div 就会消失。

.error{ border:solid 1px #ff0000; color:#ff0000;}
.error:empty{ display:none;}

调试时div显示如下：

<div class="error">     </div>

您看到的多余空格是问题所在。有什么办法可以在 css 中显示 &nbsp; 以显示：无？请帮忙。

【问题讨论】：

【解决方案1】：

这是因为<div class="error"> </div>(demo) 不为空，它有一个文本节点作为子节点。

:empty 伪类表示任何在全部。只有元素节点和文本（包括空格）是经过考虑的。评论或处理指令不影响是否一个元素是否被认为是空的。

试试

<div class="error"></div>

演示：Fiddle

【讨论】：

【解决方案2】：

:empty 伪类不选择元素，包含元素或文本（空格是文本）。

然而，现在有 experimental :blank 伪类选择元素，包含 不包含任何内容或仅包含空格，并且 @ 987654326@ 将选择 <div> 元素。不过，您应该避免在您的生产代码中使用实验性功能。

【讨论】：