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

实际上，没有一个没有文本节点子节点（或后代）的元素的选择器。

在选择器级别4中，可以使用

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

或，to account for inter-element whitespace，

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

但由于:has()可能无法在快速配置文件中完全可用，因此即使实施了选择器级别4，您也可能无法在CSS中使用它。

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

Answer 2

您可以在CSS中尝试：

.to-select:empty {
    <<your attributes>>   
}

.to-select *:empty {
    <<your attributes>>    
}

Answer 3

试试这个，

$(".to-select").filter(function(){
    return ($(this).text().trim() == "")
})