querySelector在parentNode中使用伪选择器的所有问题

Question

我有这样的结构：

<div>
  <a></a>
  <p></p>
  <p></p>
</div>

我已经将所有p都放在了真正的数组中：

var p = [].slice.call( document.querySelectorAll('div p') );

我可以使用p[0]获取第一个项目，但我需要first-child（在这种情况下是相同的）所以我尝试了querySelectorAll但是我没有得到这样的结果：< / p>

p.forEach(function( el ) {
  console.log( el.parentNode.querySelectorAll('p:first-child') ) //=> empty
});

如果我el.parentNode.querySelectorAll(':first-child')我得到的<a>不是我想要的。如何过滤数组中的first-child p？

编辑：我尝试创建一个虚拟元素并使用克隆重新创建结构来查找我的元素，虽然它有点工作但我不确定它是最好的主意......

Answer 1

CSS3中有一个first-of-type伪类。我不认为它得到了广泛的支持。 first-child伪类是一个谓词，它选择父类子节点列表中第一个东西的任何类型的元素。因为<a>是第一位的，所以唯一能够“点击”:first-child。

编辑 - 根据caniuse，实际上:first-of-type似乎得到了很好的支持。