使用CSS隐藏<span>元素为空时</span>

Question

我有这段代码：

<p class="alert-error">
<span></span>
<span></span>
<span></span>
</p>

我希望在显示<span></span>时更改“alert-error”的CSS样式。代码由具有有限后端自定义的系统生成。有时，跨度充满了错误消息。

:empty选择器似乎不起作用，因为我必须将它放在alert-error类上。

任何帮助都将不胜感激。

Answer 1

我这样做了css：

.alert-error span:empty {
    background: green;
}

并且有效，请参阅jsfiddle

Answer 2

我猜测基于我可以从您的标记结构中推测出您要隐藏整个.alert-error元素，而不是span元素在问题标题中。如果它的子节点是空的，那么显示.alert-error本身是没有意义的，因为这只会导致一个空盒子。

问题是:empty本身与元素不匹配，如果它有子元素，即使所有子元素都是:empty。

If CSS had a parent/has selector，理论上你可以根据所有孩子.alert-error的事实来选择:empty。但是由于CSS中还没有这样的选择器，你需要使用JavaScript。