CSS 中 :has() 的威力

嘿，你们这些优秀的开发人员！在这篇文章中，我们将探讨使用 :has() 在您的下一个网络项目中。 :has() 相对较新，但通过提供对 UI 中各种元素的控制而在前端社区中广受欢迎。让我们看看什么是伪类以及如何使用它。

句法

:has() 如果我们在元素内部搜索的任何内容被发现并被考虑在内，CSS 伪类可以帮助设置元素的样式。就好像说， “如果这个盒子里有特定的东西，那么就以这种方式并且仅以这种方式设计盒子。”

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

“功能性的 :has() 如果作为参数传递的任何相对选择器在锚定到某个元素时与至少一个元素匹配，则 CSS 伪类表示该元素。这个伪类提供了一种通过将相对选择器列表作为参数来选择父元素或相对于引用元素的前一个兄弟元素的方法。”

为了得到更有力的解释， 免打扰 做得很完美

造型问题

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

假设您有一个 1 级标题元素 (h1）这是博客列表页面上帖子或类似性质的内容的标题，然后您就有了标题级别 2（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 函数正在寻找所有具有 h2 继续它，并应用一类突出显示内容来使 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>
	
	<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>

	<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

很多时候，我们作为网络工作者正在操纵或处理图像。我们可以使用的工具 云量 提供对图像进行各种变换，但通常我们想要添加阴影、边框半径和标题（不要与 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;
}

我可以吗 :has() 是什么？

你可以看到 :has() 在现代浏览器中拥有强大的支持。

:has() 在社区！

我在 Twitter 上联系了我的网络，了解我的同行如何使用 :has() 在他们的日常工作中，这就是他们不得不说的。

“我有一个例子是从第 3 方包中设计特定的 SVG 样式 @saucedopen 因为我无法直接设计它的样式。”

这是什么 尼克泰勒 止 开酱 不得不说一下使用 :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

哈哈，上次我使用它时，我正在将键盘功能构建到树视图中，因此我需要检测同级元素的状态和类，但 Firefox 中还没有，所以我必须找到另一个解决方案。 🫠

佩里尼修道院 止 Nexcor 食品安全技术有限公司

很高兴看到社区成员如何使用现代 CSS 来解决现实世界的问题，同时也向 Abbey 出于可访问性的原因使用它表示感谢！

注意事项

使用时有几个要点需要注意 :has() 要点引用自 MDN。

• 伪类在其参数中呈现最具体选择器的特异性
• 如果 :has() 浏览器不支持伪类本身，整个选择器块将失败，除非 :has() 位于宽容选择器列表中，例如 :is() 和 :where()
• :has() 伪类不能嵌套在另一个伪类中 :has() 
• 伪元素也不是有效的选择器 :has() 和伪元素不是有效的锚点 :has()

结论

利用 CSS 的强大功能，包括高级功能，例如 :has() 伪类，使我们能够打造卓越的网络体验。 CSS 的优势在于它的级联和特异性……最好的部分，使我们能够充分利用它的潜力。通过利用 CSS 的功能，我们可以推动网页设计和开发向前发展，释放新的可能性并创建突破性的用户界面。

友情链接：

• SEO 支持的内容和 PR 分发。 今天得到放大。
• PlatoData.Network 垂直生成人工智能。 赋予自己力量。 访问这里。
• 柏拉图爱流。 Web3 智能。 知识放大。 访问这里。
• 柏拉图ESG。 碳， 清洁科技, 能源， 环境， 太阳能， 废物管理。 访问这里。
• 柏拉图健康。 生物技术和临床试验情报。 访问这里。
• Sumber: https://css-tricks.com/the-power-of-has-in-css/