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

Question

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

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

div 在调试时显示如下：

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

你看到的额外空间是问题所在。有什么办法可以 在 css 中显示 display:none 吗？请帮忙。

Answer 1

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

：空的

:empty 伪类表示任何没有子元素的元素。仅考虑元素节点和文本（包括空格）。注释或处理指令不会影响元素是否被视为空。

尝试

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

演示：小提琴

Answer 2

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

但是，现在有一个实验性 :blank的伪类，它选择不包含任何内容或仅包含空格的元素，.error:blank并将选择该<div>元素。不过，您应该避免在生产代码中使用实验性功能。