CSS

Question

有什么方法可以 select 一些里面没有文字的元素吗？

什么意思：

假设我们有这样的元素

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

它们都没有文本，但只有一个是空的，可以 select 与 :empty 编辑。我希望它们都被 selected，因为它们没有文本。

此外，某些元素可能只有白色 space 文本，这些文本来自制表符 html 标记等

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

Answer 1

试试这个，

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

Answer 2

您可以在 CSS:

中试试这个

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

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

Answer 3

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

在第 4 级选择器中，

可能是可行的

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

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

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

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

CSS - select 元素内部没有文本