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

回答