pie*_*e6k 10 html css css-selectors
有没有办法选择一些内部没有文字的元素？
什么意思:
让我们说我们有这样的元素
<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来解决这类问题.
实际上,没有一个没有文本节点子节点(或后代)的元素的选择器.
在选择器级别4中,可以使用
.to-select:not(:has(:not(:empty)))
或者,为了解释元素间空白,
.to-select:not(:has(:not(:blank)))
但由于:has()快速配置文件可能无法完全提供,因此即使实施了选择器级别4,您也可能无法在CSS中使用它.
不幸的是,使用JS是你最好的选择.上面的选择器:empty今天将在jQuery中运行,但即使只是一次:has()本地实现,对于这个特定的用例,你只能document.querySelectorAll()在最好的情况下使用它.