javascript - parentNode 中伪选择器的 querySelectorAll 问题

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-type CSS3 中的伪类。我认为它没有得到广泛的支持。 first-child伪类是一个谓词，它选择任何类型的元素，这些元素是其父子节点列表中的第一件事。因为<a>首先出现，它是唯一与 :first-child 一起“命中”的东西.

编辑 — 哇哦 :first-of-type根据caniuse，现在似乎得到了很好的支持.