CSS 伪类 :has() - 易学教程，面试笔记经验！

CSS :has () 伪类根据是否具有与某个选择器匹配的子元素来表示元素。

语法

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

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

要记住的要点

当浏览器不支持 :has() 伪类时，整个选择器仅当 :has() 用于 :is() 或 :where() 选择器。
您不能使用 :has()选择器位于另一个 :has() 选择器内，因为许多伪元素的存在基于其父元素的样式。允许您使用 :has() 选择这些伪元素可能会导致循环查询。
伪元素不能用作 :has() 伪元素中的选择器或锚点。

CSS :has() 同级组合器

这里是如何使用 :has() 函数选择所有 h2 元素的示例紧随其后的是 h3 元素 -

<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="/css/oceans.mp4"></video>
</body>
</html>

正则表达式和 :has() 类比

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

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