我有一个包含组的列表,并使用 CSSOM 使用文本字段动态过滤内容。这是一种仅使用 CSS 实现“搜索”的方法。
不幸的是,当过滤器过滤掉所有内容时,组容器仍然可见。我还需要以某种方式使用 CSS 将 display: none
设置到它们上,否则我需要添加一堆 JS 来控制它们。
这遥不可及吗?我知道这是一个很大的远景,但是否有一个选择器可以选择其子元素(适合某些选择器)都必须选择样式的元素?
如果我大大放宽约束,这是否可能是一个选择器,它选择其子元素(适合某些选择器)都必须具有特定类的元素?
最佳答案
不,仅通过 CSS 是不可能的:
- 有no parent selector .
- 没有可见性选择器,除了像
:not([style*="display:none"]):not([style*="display: none"])
如果你隐藏仅使用内联 CSS 的元素。 - 没有 CSS 方法可以知道是否所有 child 都满足某些条件。
这只能使用纯 JS 循环和条件或通过 jQuery 选择器如 .parent:not(:has(:visible))
来解决。
关于html - CSS:如果隐藏所有子项,则隐藏父项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45261432/