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.forEach(function( el ) {
  console.log( el.parentNode.querySelectorAll('p:first-child') ) //=> empty
});

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

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

Answer 1

first-of-typeCSS3中有一个伪类.我不认为它得到了广泛的支持.该first-child伪类是选择那些在父母身边的孩子节点列表的第一件事情的任何类型的元素谓语.因为它<a>是第一个,它是唯一能够"击中"的东西:first-child.

编辑 - :first-of-type根据caniuse的说法,现在看起来似乎得到了很好的支持.