CSS偽選擇器以選擇querySelector中的當前元素？

Question

用於選擇元素自身的CSS偽選擇器是什么？

例如，這不起作用：

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

DOMException：無法在'Element'上執行'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+和Safari 7.0+ ）中，可以在調用querySelector和querySelectorAll使用:scope選擇器：

 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>