在querySelector中选取当前元素的CSS伪选择器是什么？

Question

CSS 伪选择器中用于选中元素本身的是什么？

例如，以下语法是无效的：

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

DOM异常：在'Element'上执行'querySelector'失败：'> div'不是一个有效的选择器。

但我认为类似这样的代码可以：

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

然而，:self 并不存在，而 :root 指的是文档根元素，那么我怎样才能引用当前上下文呢？

- mpen

---

你在寻找“这个”吗？ - evolutionxbox

@evolutionxbox：:this 也不是一个有效的伪选择器。 - mpen

如果您正在寻找直接子元素，为什么不使用 programBox.children 并按 nodeType 进行过滤呢？ - evolutionxbox

@evolutionxbox 我不是在寻找直接子代，而是在寻找具有特定限制条件的直接子代后代。 - mpen

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>

- gyre

---

但为什么要使用 querySelector，而不是使用 DOM API 呢？ - evolutionxbox

:scope将被移除，有什么替代建议吗？ - user6102188

据我所知，最新的DOM中，“:scope”仅在样式表中被删除，而不是在“querySelector”或“querySelectorAll”调用中。 - gyre

@brennanyoung 你好 Brennan，很抱歉回复晚了，但如果你查看最新的选择器4级草案（https://drafts.csswg.org/selectors-4/#the-scope-pseudo），它仍然包含:scope，因此据我所知它并没有被弃用。目前在样式表中没有有用的使用方式，但这可能会在未来改变。 - gyre

不幸的是，这对于兄弟选择器 :scope + div 或 :scope ~ div 无效。 - Andrei Diaconescu

Answer 2

另一个选择（我还没有看到提到的）是使用*，例如* > div。

- Christian