javascript - querySelectorAll 与 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？

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

score 5 · Accepted Answer

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

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

1 回答 1