1. 首页
  2. CSS 菜鸟教程
  3. CSS - 伪类 :has()

CSS - 伪类 :has()

CSS :has（） 伪类表示一个元素，该元素基于它是否具有与某个选择器匹配的子元素。

语法

:has(<relative-selector-list>) {
	 	/* ... */
}
Firefox 浏览器不支持 :has（） 伪类。

要记住的 Ponits

  • 当浏览器不支持 :has（） 伪类时，只有在 :is（） 或 :where（） 选择器中使用 :has（） 时，整个选择器块才会起作用。
  • 你不能在另一个 :has（） 选择器中使用 :has（） 选择器，因为许多伪元素的存在基于其父元素的样式设置。允许您使用 :has（） 选择这些伪元素可能会导致循环查询。
  • 伪元素不能用作 :has（） 伪类中的选择器或锚点。

CSS :has（） - 同级组合器

这是一个如何使用 :has（） 函数选择所有紧跟 h3 元素的 h2 元素的示例 -

<html>
<head>
<style>
	 	div {
	 	 	 background-color: pink;
	 	}
	 	h2:has(+ h3) {
	 	 	 margin: 0 0 50px 0;
	 	}
</style>
</head>
<body>
	 	<p>You can see it adds bottom margin to h2 elements immediately followed by an h3 element.</p>
	 	<div>
	 	 	 <h2>QikepuCom</h2>
	 	 	 <h3>CSS Pseudo-class - :has()</h3>
	 	 	 <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
	 	</div>
</body>
</html>

CSS :has（） - 使用 ：is（） 伪类

CSS 选择器 :is（h1， h2， h3） 选择所有 h1、h2 和 h3 元素。然后， :has（） 伪类选择这些元素中的任何一个，这些元素具有 h2、h3 或 h5 元素作为它们的下一个同级元素，如下所示 -

<html>
<head>
<style>
	 	div {
	 	 	 background-color: pink;
	 	}
	 	:is(h1, h2, h3):has(+ :is(h2, h3, h5)) {
	 	 	 margin-bottom: 50px ;
	 	}
</style>
</head>
<body>
	 	<p>You can see it adds bottom margin to h2 elements immediately followed by an h3 element and h3 element followed by immediately h4.</p>
	 	<div>
	 	 	 <h2>QikepuCom</h2>
	 	 	 <h3>CSS Pseudo-class :has()</h3>
	 	 	 <h5>with :is() Pseudo-class</h5>
	 	 	 <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
	 	</div>
</body>
</html>

CSS ：has（） - 逻辑运算

  • :has（video， audio） 选择器检查元素中是否存在视频或音频元素。
  • :has（video）:has（audio） 选择器检查元素是否包含视频或音频元素。

这是一个如何使用 :has（） 伪类为正文元素添加红色边框和 50% 宽度的示例，如果它包含视频或音频元素 -

<html>
<head>
<style>
	 	video {
	 	 	 width: 50%;
	 	 	 margin: 50px;
	 	}
	 	body:has(video, audio) {
	 	 	 border: 3px solid red;
	 	}
</style>
</head>
<body>
	 	<video controls src="images/boat_video.mp4"></video>
</body>
</html>

正则表达式和 :has（） 类比

CSS :has（） 选择器和带有 lookahead 断言的正则表达式有一个相似之处，它们使您能够根据特定模式定位元素（或字符串），而无需实际选择与该模式匹配的元素（或字符串）。

特征 描述
Positive lookahead (?=pattern) CSS 选择器和正则表达式 abc（？=xyz） 都允许您根据紧随其后的另一个元素的存在来选择元素，而无需实际选择另一个元素本身。
Negative lookahead (?!pattern) CSS选择器.abc：has（+ ：not（.xyz））类似于正则表达式abc（？！xyz）。仅当后面没有 .xyz 时，两者都选择 .abc。
<< CSS - 伪类 :focus-within CSS - 伪类 :host >>