CSS - 选择内部没有文本的元素答案

【问题标题】：CSS - select element without text insideCSS - 选择内部没有文本的元素
【发布时间】：2015-03-05 02:01:02
【问题描述】：

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

什么意思：

假设我们有这样的元素

<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来解决这类问题。

【问题讨论】：

【解决方案1】：

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

在选择器级别 4 中可能有

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

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

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

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

【讨论】：

【解决方案2】：

你可以在你的 CSS 中试试这个：

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

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

【讨论】：

【解决方案3】：

试试这个，

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

【讨论】：