css - :empty selector not working in css

Question

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

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

div 在调试时显示如下:

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

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

Answer 1

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

:empty

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.

尝试

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

演示:Fiddle