如果所有子级都隐藏，则隐藏父级

Question

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

不幸的是，当过滤器过滤掉所有内容时，组容器仍然可见。我还需要使用 CSS 以某种方式将

display: none

设置到它们上，否则我需要添加一堆 JS 来控制它们。

这远程可能吗？我知道这是一个很大的目标，但是是否有一个选择器可以选择其子元素（适合某些选择器）都必须选择样式的元素？

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

Answer 1

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

1. 没有没有父选择器。
2. 如果您仅使用内联 CSS 隐藏元素，则没有可见性选择器，除了类似

   :not([style*="display:none"]):not([style*="display: none"])

   的内容。
3. CSS 没有办法知道是否所有孩子都满足某些条件。

---

这只能使用纯 JS 循环和条件或通过像

.parent:not(:has(:visible))

这样的 jQuery 选择器来解决。

Answer 2

实际上，现在在 CSS 中只有使用 :has 选择器才能做到这一点，因为它作为父选择器工作。 此外，使用类来隐藏元素通常是一个好主意，我在下面演示了这一点。

.container {
  background-color: red;
  padding: 2px;
}

@supports(selector(:has(div))) {
  .container {
    display: none
  }

  /* "unhides" all elements that contain at least one visible child element directly below */
  .container:has(> :not(.invisible)) {
    display: block;
  }
}

.invisible {
  /* display: none !important; */
  background-color: yellow; /* for easier debugging instead */
}

<!-- This will be visible -->
<div class="container">
  <h4>Should be visible:</h4>
  <div class="invisible">Invisible 1</div>
  <div class="invisible">Invisible 2</div>
  <div class="invisible">...</div>
</div>

<!-- This will be hidden -->
<div class="container">
  <div class="invisible">Invisible 1</div>
  <div class="invisible">Invisible 2</div>
  <div class="invisible">...</div>
</div>

<div class="container">
  Inline text is getting ignored
  <div class="invisible">Invisible 1</div>
  <div class="invisible">Invisible 2</div>
  <div class="invisible">...</div>
</div>

请注意浏览器对

:has

的支持，因此我将其包装在

@supports

子句中。