：空选择器在css中不工作

我在

.error

类中使用了

:empty

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

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

调试时div显示如下：

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

你看到的额外空间就是问题所在。 是否有任何方法可以在css中显示

，以显示：无？请帮助。

这是因为

（）不是空的，它有一个文本节点作为子节点

：empty伪类表示此时没有子元素的任何元素 全部的仅显示元素节点和文本（包括空格） 考虑过的。注释或处理说明不影响 元素是否为空

试一试

演示：

伪类不选择包含元素或文本的元素（空白为文本）

---

然而，现在有了实验性的伪类，选择元素，不包含任何内容或仅包含空格，并且

。错误：blank

将选择该

元素。但是，您应该避免在产品代码中使用实验性的功能。

您是否可以控制输出？我认为这正是问题所在，我认为OP无法控制HTML输出。人们应该记住，

：blank

在大多数浏览器上不受支持：@JulienLeCoupanec我相信他提到了

：blank

是实验性的，所以我看不出有任何理由否决他？@AdnaneAr是的。我提交这篇评论是为了添加caniuse链接。我没有投他的反对票。

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