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