javascript - CSS 使带有边框的容器在其所有内容都被隐藏时消失

Question

这是一个常见的需求，源于我制作快捷菜单的经验。

您有一个具有某些样式(框阴影...边框...)的容器，并且动态地在其中包含元素。

当容器为空时，我希望容器消失而不是用样式渲染退化的形状。

这很容易(或多或少优雅地)通过使用类似 container:empty { display: none; 的东西来实现。 。

当您拥有这些类型的容器的层次结构时，问题就真正出现了。考虑:

<div>
  <span id=b></span>
  <span id=a></span>
<div>

两个 span 都是空容器，它们没有绘制样式，因为我们有一个很好的 :empty 样式，使它们 display: none。

但是我们现在无法对元容器使用该技巧。 :empty 伪元素样式不能使 span 不复存在，因此 div 不被认为是空的。

问题是有没有聪明的 CSS 主义可以缓解这种情况？

在下一个即将到来的 CSS 草稿中有没有？

如果两者都不是这种情况，那么可能需要添加什么？这种“不完整性”是当今 CSS 的最大局限之一。

我知道如果更改规范以允许子节点的任何方面影响父节点，则在扫描子节点之前不可能知道如何设置父节点的样式，但是我们是否可以不允许父节点有一次机会重新获得- 在解析其子项的末尾设置样式？这难道不会改变算法的时间复杂度吗？ (我意识到这是多么愚蠢，因为我肯定会大大简化它，但这一点可能仍然成立。)

Answer 1

你不能通过 css 做到这一点。但是你可以使用 javascript:

$(".container:not(:has(:not(:empty)))").hide ();