:空选择器不在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伪类表示任何没有子元素的元素.仅考虑元素节点和文本(包括空格).注释或处理指令不会影响元素是否为空.

尝试

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

演示:小提琴

Answer 2

如果您只有特定的元素作为孩子，您可以尝试：

.error:not(:has(yourChildElements)) {
   display: none
}