:has(selector)
如果某个元素至少含有一个与选择器相匹配的元素,那么这个元素就会被选中。
-
1.1.4 新增:has(selector)
selector (Selector) 任何选择器。
表达式 $('div:has(p)')
会匹配一个 <div>
,并且它的后代元素中要含有 <p>
,就算不是直接子元素也没关系。
补充说明:
- 由于
:has()
是 jQuery 扩展出来的,它并不是 CSS 规范中的一部分。当使用:has()
时,并不会比使用原生的 DOM 方法querySelectorAll()
性能好。为了在主流浏览器中得到更好的性能,请使用$("your-pure-css-selector").has(selector/DOMElement)
方法来代替。
示例:
给所有含有 p 段落标签的 div 加上一个名为 "test" 的 class。
<!DOCTYPE html>
<html>
<head>
<style>
.test{ border: 3px inset red; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
<script>
$("div:has(p)").addClass("test");
</script>
</body>
</html>