简单的聊一聊如何使用CSS的父类Has选择器

最近的:has()选择器允许您对父元素和其他祖先应用样式，本文将向您展示如何在Web应用程序开发中使用它。

在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。

一个较新的CSS选择器/伪类被称为 :has ，它允许您选择每个具有与您提供给 :has() 函数的选择器匹配的子元素的元素。它在CSS中是一个重要的解决方案，不仅仅是一个简单的“父级”选择器。

使用 :has() 选择器，您可以将样式应用于父元素或祖先HTML元素。这样我们就可以扩展选择器的范围，包括一个或多个兄弟或子元素。

在本文中，我们将讨论CSS选择器以及它们在代码中的多个使用示例。

何时使用:has选择器

:has() 选择器是一种CSS伪类，允许您选择包含特定子元素的元素。它是一个强大的CSS工具，您可以用于以下目的：

• 为子元素的父元素设置样式：如果一个 <div> 元素包含一个 <p> 元素，你可以使用 :has() 选择器来为它设置样式。

• 有条件地添加或删除样式：如果 <div> 元素包含特定数量的子元素，您可以使用 :has() 选择器为其添加边框。

• 根据内容选择元素：您可以使用 :has() 选择器来选择所有包含具有 "important" 类的子元素的 <div> 元素。

:has() 选择器可以与任何有效的CSS选择器一起使用，包括其他伪类。这使得它成为一个非常多功能的工具，可以以各种方式使用。

这是一个关于如何使用 :has() 选择器的小片段

/* Select all <div> elements that contain a <p> element. */
div:has(p) {
 background-color: blue;
}
  
/* Select all <div> elements that contain a child element with the class "important". */
div:has(.important) {
 border: 1px solid black;
}   
/* Select all <div> elements that contain at least two child elements. */
div:has(> * + *) {
 padding: 10px;
}

上面的代码展示了如何使用 :has 选择器的实际示例。但在我们深入使用 :has 选择器之前，让我们先来看一下为什么选择器很重要。

项目设置

要开始这个项目，你可以从这个GitHub仓库克隆起始代码。完成的仓库也在这个仓库中，但你需要使用起始代码来跟随本教程。

https://github.com/joycefoster642/-has-css-project

上面的图片展示了我们的项目在浏览器上启动时的样子。

注意：该项目只是一个简单的类似博客的演示，用于展示 :has 伪类的一般用法。

正向选择 vs 反向选择

以前，开发者只能选择前进，但是现在有了 :has 选择器，你现在也可以选择后退。

现在，我们要选择一个元素的父级。过去，通常是这样做的：

article + article {
 background-color: pink;
}

正如你所注意到的，第二和第三篇文章的颜色发生了变化。这是因为它们相邻。现在，让我们用 :has 选择器来反向进行操作。

article:has(+ article) {
 background-color: coral;
}

在上面的代码中，我们只是简单地说，如果文章有相邻的文章，选择前两篇文章。

现在，请注意这次选择了第一篇和第二篇文章。

基于子元素的选择

使用 :has ，我们不仅可以选择父元素，还可以选择子元素。

article:has(span) .bold {
 background-color: lightyellow;
}
article:has(span) .italic {
 text-decoration: underline;
}

在 index.html 文件中，我们使用 span 为文章2和3应用了一个加粗和斜体的类。在我们的CSS文件中，我们使用 article:has(span) 语法选择了我们的 span 。以下是结果：

在这里，您可以看到对第二和第三篇文章中的粗体和斜体应用的更改。我们不仅选择了文章，还选择了 span 类别应用的内容。

使用:has与:not选择

在本节中，我们将介绍如何使用 :has 伪类与 :not 。

article:not(:has(span)) {
 background-color: yellowgreen;
}

以下是结果：

只会改变没有 span 类的文章。:has 选择器还支持 0R 逻辑条件。

article:has(p, .button) {
 background-color: royalblue;
}

以下是结果：

在这里，我们可以选择一个带有 OR 的段落的文章，或者选择一个带有 button 类的任意文章。这三篇文章被选择是因为它们都有一个 p 的HTML标签。但是如果我们移除 p 标签，只有最后一个带有“buy now” button 类的文章会保持着颜色。

:has使用案例和示例

在本节中，我们将探讨使用 :has 选择器时的更多实际用例和示例。

导航菜单示例

这将引导我们进入我们项目的下一部分，它看起来是这样的：

在这里，我们将鼠标移到位置上，您可以看到当我们将鼠标悬停在位置上时，我们拥有的不同位置。

当我们不悬停在位置和员工上时，您会注意到根本没有任何下拉菜单的指示。如果我们为此使用修饰类，我们将不得不手动进入HTML文件并编写代码。然而，我们可以通过 :has 伪类来实现这一点。

.nav__item:has(.nav__submenu)::after {
 font-family: "Font Awesome 5 Free";
 font-weight: 400;
 content: "\f150";
 margin-left: 1rem;
}

在上面的代码中，我们说，如果 .nav__item 里面有 .nav__submenu ，则只将设计应用于前两个导航图标。以下是结果：

模态示例

我们可以用JavaScript创建一个模态框，但现在我们也可以使用 :has 选择器来实现。下面的示例将带我们进入项目的下一个部分，效果如下：

当复选框被选中时，没有任何反应。但是我们可以通过 :has 伪类轻松实现某些操作。

.awesome:has(.awesome__terms:checked) {
 display: none;
}

.awesome 类是我们的模态框。然后我们说如果我们有 .awesome__terms: checked ，再次点击复选框时让下一页显示出来。

浅色和深色模式示例

这是另一个快速示例，展示了如果选中了某个选项，我们可以如何应用它。

.three:has(.lightswitch:checked) {
 background-color: var(--COLOR);
 color: var(--BGCOLOR);
}

一旦我们应用上述代码并点击“切换到暗模式”，下面是结果：

现在，您可以无缝切换浅色和深色模式。

输入验证示例

我们的最后一个例子将引导我们进入项目的这一部分，看起来像这样：

上面的图像显示了包含文本“名称”和文本输入的 label 。现在，我们要选择相反的东西。以前，我们只能向前选择，所以 label 必须在文本 input 之后。现在，我们可以根据 input 中的内容更改 label 。

<div>
 <label for="name">Name:</label>
 <br />
 <input
   class="name"
   type="text"
   name="name"
   id="name"
   required
   pattern="^\[A-Z\][A-z]{2,}"
 />
</div>

在我们上面的代码中，我们对 index.html 应用了一个模式。在这里，我们有一个 required pattern ，其中的正则表达式表示文本必须以大写字母开头，并且至少为3个字符。在我们的 style.css 中，我们包含了以下代码

label:has(~ .name:valid)::after {
 content: '✔️';
 color: limegreen;
 margin-left: 1rem;
 font-size: 3rem;
}

以下是结果：

名字“Joyce”符合首字母大写且最多三个单词的要求，因此出现了绿色的勾号。

既然我们已经到了教程的结尾，希望你对 CSS 选择器/伪类有所了解。

结论

CSS :has 选择器提供了一种创新的方法来解决网页开发中的复杂样式挑战。在本文中，我们探讨了这个强大选择器的功能和潜在用例，它允许我们根据元素的后代来定位目标元素。

通过利用 :has 选择器，网页开发人员可以提高他们的CSS代码的效率和灵活性，简化选择过程，减少不必要的类和嵌套结构的需求。

这个选择器使开发人员能够创建更清晰、更易于维护的代码，同时保持HTML结构的完整性。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。