：空选择器在 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 中显示

 

来显示：无？请帮忙。

Answer 1

因为

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

(demo)不为空，它有一个文本节点作为子节点。

：空

:empty 伪类表示任何没有子元素的元素 全部。仅元素节点和文本（包括空格） 经过考虑的。注释或处理指令不影响是否 元素被视为空或非空。

尝试

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

演示：小提琴

Answer 2

如果您小时候只有特定元素，您可以尝试：

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

Answer 3

:empty

伪类不选择元素，包含元素或文本（空白是文本）。

但是，现在有 experimental

:blank

伪类，它 选择 元素，包含 不包含任何内容或仅包含空格 ，并且

.error:blank

将选择该

<div>

元素。不过，您应该避免在生产代码中使用实验性功能。

Answer 4

这里有一个替代方案：

.error:not(:has(*)) {
    display: none;
}

如果里面没有任何内容，这将选择一个类。