CSS僞選擇器來選擇querySelector內的當前元素？

Question

什麼是CSS僞選擇器來選擇一個元素的自我？

例如，該不工作：

Array.prototype.map.call(document.querySelectorAll('.program_record_outer'), programBox => { 
    return programBox.querySelector('> div') 
}); 

拋出：DOMException：未能執行上 '元素' 'querySelector'： '> DIV' 不是一個有效的選擇器。

但我相信，像這樣的：

Array.prototype.map.call(document.querySelectorAll('.program_record_outer'), programBox => { 
    return programBox.querySelector(':self > div') 
}); 

然而，:self也不是個事，並:root指文檔根目錄，所以我怎麼指當前情境？

Answer 1

在一些最新的瀏覽器（Chrome, Firefox 32+, Opera 15+, and Safari 7.0+），你可以使用呼叫​​選擇器querySelector和querySelectorAll：

let result = [...document.querySelectorAll('.program_record_outer')].map(
 
    programBox => programBox.querySelector(':scope > div') 
 
) 
 

 
console.log(result)

<div class="program_record_outer"> 
 
    <div>1</div> 
 
</div> 
 
<div class="program_record_outer"> 
 
    <div>2</div> 
 
</div> 
 
<div class="program_record_outer"> 
 
    <div>3</div> 
 
</div>