querySelectorAll问题与parentNode

伪选择我有一个结构是这样的：querySelectorAll问题与parentNode

<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？

编辑：我试图创建一个虚拟元素，并与克隆重现结构找我的元素，虽然它有点工作我不知道这是最好的想法...

2013-01-12 elclanrs

'：first-child'的意思是**任何**类型的**第一**孩子。你想要的是CSS3'first-type-type'伪类，我认为它现在不被广泛支持。 – Pointy

@Pointy，当然，因为没有阅读规范而傻了。您可以将其作为答案发布。 – elclanrs

顺便说一下，对于'：first-child'，你可以使用'querySelector（）'方法。 – VisioN

有一个first-of-type伪在CSS3中的类。我不认为它得到了广泛的支持。 first-child伪类是一种谓词，用于选择任何类型的元素，这些元素是父级子节点列表中的第一项。因为<a>最先出现，所以它是唯一一个会“打”:first-child。

编辑 —哇其实:first-of-type似乎现在可以很好的支持，根据caniuse。

2013-01-12 01:06:53 Pointy

哇。尼斯链接！我所关心的其实就是IE9 +，所以这很好。然后Imma使用它。 – elclanrs

嘿！ '：first-of-type'是在CSS3中声明的，也是我第一次听说它。这是一个很好的惊喜:) +1 – VisioN

回答