:empty选择器在CSS中不起作用 [英] :empty selector not working in css

问题描述

我在.error类中使用了:empty选择器.问题是，即使div中没有​​错误类别的内容，错误类别也不会被完全删除. 当我在萤火虫中进行测试时，我发现div仍有一些空格，而当我删除多余的空格时，div便消失了.

i used :empty selector in .error class. the problem is that even when there is no content inside the div with class of error, the error class is not removed completely. when i tested in firebug, i found that the div still has some whitespace and when i remove that extra spaces, the div then disappears.

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

div在调试时显示如下:

the div shows like this on debugging:

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

您看到的多余空格是问题所在. 我有什么办法可以在CSS中显示 来显示:无?请帮忙.

that extra spaces you see is the problem. Is there any way i can show   in css to display:none ? pls help.

推荐答案

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

it is because <div class="error"> </div>(demo) is not empty, it has a text node as the child.

:空

: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>

演示:小提琴

这篇关于:empty选择器在CSS中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！