html - CSS:如果隐藏所有子项，则隐藏父项

Question

我有一个包含组的列表，并使用 CSSOM 使用文本字段动态过滤内容。这是一种仅使用 CSS 实现“搜索”的方法。

不幸的是，当过滤器过滤掉所有内容时，组容器仍然可见。我还需要以某种方式使用 CSS 将 display: none 设置到它们上，否则我需要添加一堆 JS 来控制它们。

这遥不可及吗？我知道这是一个很大的远景，但是否有一个选择器可以选择其子元素(适合某些选择器)都必须选择样式的元素？

如果我大大放宽约束，这是否可能是一个选择器，它选择其子元素(适合某些选择器)都必须具有特定类的元素？

Answer 1

不，仅通过 CSS 是不可能的:

1. 有no parent selector .
2. 没有可见性选择器，除了像 :not([style*="display:none"]):not([style*="display: none"]) 如果你隐藏仅使用内联 CSS 的元素。
3. 没有 CSS 方法可以知道是否所有 child 都满足某些条件。

---

这只能使用纯 JS 循环和条件或通过 jQuery 选择器如 .parent:not(:has(:visible)) 来解决。