html - CSS - 选择里面没有文本的元素

Question

有没有办法选择一些里面没有文字的元素？

什么意思:

假设我们有这样的元素

<div class="to-select"></div> <-- this is empty
<div class="to-select"><span></span></div> <-- this is not empty, but dont have text

它们都没有文本，但是只有一个是空的，可以用 :empty 选择。我希望他们都被选中，因为他们没有文字。

此外，某些元素可能只有来自标签式 html 标记等的空白文本。

我知道用js做起来很简单。但如果可能的话，我正在寻找 css 解决方案。我不喜欢用 js 来解决这类问题。

Answer 1

确实，对于没有文本节点子节点(或后代节点)的元素，没有选择器。

在 Selectors level 4 中可能有

.to-select:not(:has(:not(:empty)))

或者，to account for inter-element whitespace ,

.to-select:not(:has(:not(:blank)))

但是由于 :has() 在 fast profile 中可能不完全可用，即使实现了 Selectors level 4，您也可能无法在 CSS 中使用它。

不幸的是，使用 JS 是最好的选择。上面带有 :empty 的选择器今天可以在 jQuery 中使用，但是即使 :has() 是本地实现的，对于这个特定的用例，您也只能使用它充其量在 document.querySelectorAll() 中。