CSS 伪类 - :has()

CSS :has() 伪类根据元素是否包含匹配特定选择器的子元素来表示该元素。

语法

:has(<relative-selector-list>) {
   /* ... */
}

:has() 伪类不受 Firefox 浏览器支持。

要点

当浏览器不支持 :has() 伪类时，只有在 :has() 用于 :is() 或 :where() 选择器内部时，整个选择器块才会生效。
您不能在另一个 :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>Tutorialspoint</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>Tutorialspoint</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() 伪类向 body 元素添加红色边框和 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() 选择器和带有前瞻断言的正则表达式在以下方面具有相似性：它们使您能够根据特定模式定位元素（或字符串），而无需实际选择匹配该模式的元素（或字符串）。

特性	描述
正向先行断言 (?=pattern)	CSS 选择器和正则表达式 abc(?=xyz) 都允许您根据另一个元素紧随其后的情况选择一个元素，而无需实际选择该元素本身。
负向先行断言 (?!pattern)	CSS 选择器 .abc:has(+ :not(.xyz)) 类似于正则表达式 abc(?!xyz)。两者仅在 .abc 后面没有 .xyz 时才选择 .abc。

打印页面