CSS-选择元素，里面没有文本 [英] CSS - select element without text inside

问题描述

是否可以选择一些内部没有文本的元素?

Is there any way to select some element that have no text inside?

这是什么意思:

让我们说我们有这样的元素

Lets say we've got such elements

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

它们两个都没有文本，但是只有一个是空的，可以用:empty选择.我希望他们两个都没有文字，因此要选择他们两个.

Both of them dont have text, however only one of them is empty and can be selected with :empty. I want both of them to be selected as they dont have text.

此外，某些元素可能仅包含来自选项卡式html标记等的空白文本.

Also, some elements might have only white-space text that came from tabbed html markup etc.

我知道使用js很容易.但我正在寻找CSS解决方案(如果可能).我不喜欢将js用于此类问题.

I know it's quite easy to do with js. But I'm looking for css solution if it's possible. I dont like to use js for this kind of problems.

推荐答案

实际上，没有用于没有文本节点子代(或子代)的元素的选择器.

Indeed, there isn't a selector for elements with no text node children (or descendants).

在选择器级别4中，

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

或以说明元素间的空白 ，

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

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

but since :has() may not be fully available in the fast profile, you may not be able to use it in CSS even once Selectors level 4 is implemented.

不幸的是，使用JS是您最好的选择.上面带有:empty的选择器今天将在jQuery中工作，但是即使本地实现了:has()，对于这种特定的用例，您最多只能在document.querySelectorAll()中使用它.

Using JS is your best bet, unfortunately. The above selector with :empty will work in jQuery today, but even once :has() is implemented natively, for this specific use case you'd only be able to use it in document.querySelectorAll() at best.

这篇关于CSS-选择元素，里面没有文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！