CSS 中 :has() 的威力

句法

如果我们在元素中找到并解释了我们要查找的内容， CSS:has()伪类将帮助设置元素的样式。这就像说：“如果这个框中有特定内容，那么就以这种方式设置框的样式，并且只能以这种方式设置。”

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

“如果作为参数传递的任何相对选择器在锚定该元素时与至少一个元素匹配，则函数式:has()CSS 伪类表示该元素。此伪类提供了一种通过将相对选择器列表作为参数来选择相对于参考元素的父元素或上一个同级元素的方法。”对于更详尽的解释，MDN做得很完美

造型问题

在过去的几年里，我们无法使用 CSS 根据父元素的直接子元素或基于其他元素的元素来设置父元素的样式。如果必须这样做，我们需要使用一些 JavaScript 并根据 HTML 结构打开/关闭类。:has()解决了这个问题。

假设您有一个一级标题元素 ( h1)，它是博客列表页面上的帖子标题或类似内容，然后您有一个二级标题 ( h2) 紧跟在其后。此 h2 可以是帖子的副标题。如果h2存在、重要且紧跟在 之后h1，您可能希望使 h1 突出。以前您必须编写 JS 函数。

传统方式——JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

这个 JS 函数正在寻找所有带有前缀的 h1 h2，并应用一个 highlight-content 类来使其h1成为一篇重要的文章。

现代 CSS 的全新改进正在火热进行中！我们在浏览器中可以执行的操作功能已经取得了长足的进步。现在我们可以利用 CSS 来执行传统上需要使用 JavaScript 执行的操作，虽然不是所有操作，但可以执行某些操作。

新学校之路 – CSS

h1:has(+ h2) {
    color: blue;
}

加上一些 :has()！

现在，您可以使用它:has()来实现与 JS 函数相同的功能。此 CSS 检查任何 h1，并使用同级组合器检查紧随其后的 h2，并将蓝色添加到文本中。以下是几个:has()可以派上用场的用例。

:has 选择器示例 1

HTML

<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
<!-- WITHOUT HAS BELOW -->

<h1>This is a test</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:has 选择器示例 2

很多时候，我们作为网络工作者都在处理或处理图像。我们可以使用Cloudinary提供的工具对图像进行各种转换，但通常我们想要添加阴影、边框半径和标题（不要与 alt 属性中的替代文本混淆）。

下面的例子用于:has()查看图形或图像是否具有 figcaption 元素，如果有，则应用一些背景和边框半径来使图像脱颖而出。

HTML

<section>
  <figure>
    <img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
    <figcaption>My Aunt Sally's Doggo</figcaption>
  </figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}