：空选择器不在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中显示 来显示：none吗？请帮助。

Answer 1

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

:empty

  

：empty伪类表示任何没有子节点的元素   所有。只有元素节点和文本（包括空格）   考虑。注释或处理说明不影响是否   一个元素被认为是空的。

尝试

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

演示：Fiddle

Answer 2

:empty伪类不选择元素，其中包含元素或文本（空白是文本）

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