有没有办法使用查询选择器选择具有一些文本数据的第一个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)＆＃34;就选择器而言（即在选择器字符串本身内）。

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