CSS伪选择器在querySelector中选择当前元素？

Question

选择元素自我的CSS伪选择器是什么？

例如，这不起作用：

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

  

DOMException：无法在'Element'上执行'querySelector'：'＆gt; 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时使用:scope选择器：

＆＃13;

＆＃13;

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

console.log(result)

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;