有没有办法使用查询选择器选择具有一些文本数据的第一个 p 标签

Question

我有一个div，它有多个p 标签。我想获取不为空的p 元素的文本。例如

<div>
 <p></p>
 <p></p>
 <p>data</p>
 <span>some</span>
</div>

我想获取第三个p 元素的数据，即data。

我可以使用

document.querySelector("p:nth-child(1)");

但在上述情况下，我必须定义子编号。但是我怎样才能得到基于空条件的 p

Answer 1

假设空白不成问题，您可以将:not() pseudo-class 与:empty pseudo-class 结合使用：

document.querySelector("p:not(:empty)");

由于您使用的是document.querySelector()，因此可以确保仅匹配第一个此类元素。您不能用选择器（即在选择器字符串本身内）表达“第一个p:not(:empty)”。

（当然，您可能希望选择器更具体，除非您真的对整个文档中的第一个非空 p 元素感兴趣。）