CSS-如果child为空则隐藏元素 [英] CSS - Hide element if child is empty

问题描述

如果子元素为空，是否可以隐藏父元素?我知道有一个:empty 选择器，但只有在父级不包含任何内容(包括HTML元素)的情况下，它才起作用.

Is it possible to hide a parent element, if its child is empty? I know there is the :empty selector, but it only works, if the parent doesn't contain anything, including HTML elements.

这是我的HTML:

<div class="row">
    <div class="center">
        <span class="text-danger label-promotion"><strong></strong></span>
    </div>
</div>

还有我的CSS，可惜这种方式无法正常工作，但我认为您已经明白了我要做的事情:

And my CSS, which sadly doesn't work this way, but I think you get what I'm trying to do:

.label-promotion:empty {
    display: none;
}

我希望< span> 在不为空的情况下不显示，为此，我想避免使用JS.有可能吗?

I want the <span> not to appear if is empty and I'd like to avoid JS for this. Is that possible?

推荐答案

如果 .label-promotion 的子代始终是< strong> ，则可以做:

If the child of .label-promotion will always be a <strong>, you can do:

.label-promotion strong:empty {
    display: none;
}

隐藏< strong> .但是，您无法使用CSS隐藏< span> 本身.看到类似问题的答案:

to hide the <strong>. However, you can not hide the <span> itself with CSS. See this answer to a similar question: I would like to hide my outer div if inner div is empty

这篇关于CSS-如果child为空则隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！