CSS伪选择器以选择querySelector中的当前元素? [英] CSS pseudo-selector to select the current element within querySelector?
本文介绍了CSS伪选择器以选择querySelector中的当前元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
选择元素自身的CSS伪选择器是什么?
What's the CSS pseudo-selector to select an element's self?
例如,这不起作用:
Array.prototype.map.call(document.querySelectorAll('.program_record_outer'), programBox => {
return programBox.querySelector('> div')
});
DOMException:无法在'Element'上执行'querySelector':'> div'不是有效的选择器.
DOMException: Failed to execute 'querySelector' on 'Element': '> div' is not a valid selector.
但是我相信这样会:
Array.prototype.map.call(document.querySelectorAll('.program_record_outer'), programBox => {
return programBox.querySelector(':self > div')
});
但是,:self
不是东西,:root
是指文档根目录,那么如何指代当前上下文?
However, :self
isn't a thing, and :root
refers to the document root, so how do I refer to the current context?
推荐答案
在某些最新的浏览器中( :scope
选择器,用于调用querySelector
和querySelectorAll
:
In some of the latest browsers (Chrome, Firefox 32+, Opera 15+, and Safari 7.0+) you can use the :scope
selector in calls to querySelector
and 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>
这篇关于CSS伪选择器以选择querySelector中的当前元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文