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

【问题标题】：CSS pseudo-selector to select the current element within querySelector?CSS伪选择器在querySelector中选择当前元素？
【发布时间】：2017-04-11 18:54:04
【问题描述】：

选择元素自身的 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 指的是文档根目录，那么我如何引用当前上下文呢？

【问题讨论】：

您在寻找this吗？
@evolutionxbox :this 也不是有效的伪选择器。
如果您正在寻找直系子女，为什么不使用programBox.children 并按nodeType 过滤？
@evolutionxbox 我不是在寻找直系子女。我正在寻找具有特定限制的直系子女的后代。

标签： javascript css

【解决方案1】：

在某些最新的浏览器 (Chrome, Firefox 32+, Opera 15+, and 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>

【讨论】：

范围！而已。我知道有件事，但我想不起来，谷歌也没有发现任何东西。将在约 10 分钟内接受。
:scope 正在被删除，有什么替代方案的建议吗？
@EmilMoe 据我所知，最新 DOM 中的 :scope 只会在样式表中被删除，而不是调用 querySelector 或 querySelectorAll
@brennanyoung 嗨，Brennan，很抱歉，这么晚才回复，但是如果您查看最新的 Selectors Level 4 草案 (drafts.csswg.org/selectors-4/#the-scope-pseudo)，它仍然包含 :scope，因此据我所知不是已弃用。目前没有在样式表中使用它的有用方法，但将来可能会改变。
不幸的是，这不适用于兄弟运算符 :scope + div 或 :scope ~ div