这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

:has() 伪类选择器 能够选出具有满足参数选择器特性的元素.  目前而言 :has() 还不能被应用到行内样式表, 但是可以使用js的方法 document.querySelector() 选择.

/* Selects any <a>, as long as it has an <img> element directly inside it  */
/* Note that this is not supported in any browser yet */
/* It also isn't intended to work in stylesheets */
var test = document.querySelector('a:has(> img)');

语法

:has(relative_selector_list)

样例

下面的样例是唯一的 <a> 元素有一个直接子元素 <img> :

a:has(> img)

规范

Specification Status Comment
Selectors Level 4
:has()
Working Draft Initial definition

浏览器兼容

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 未实现 未实现 未实现 未实现 未实现 未实现
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 未实现 未实现 未实现 未实现

文档标签和贡献者

 此页面的贡献者: LoveofRedMoon
 最后编辑者: LoveofRedMoon,