网站域名在哪看,莱芜网站优化平台,ajax网站开发典型实例,配音阁在线制作网站最近的:has()选择器允许您对父元素和其他祖先应用样式#xff0c;本文将向您展示如何在Web应用程序开发中使用它。 在CSS的世界中#xff0c;选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。 … 最近的: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 。 divlabel fornameName:/labelbr /inputclassnametypetextnamenameidnamerequiredpattern^\[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结构的完整性。 由于文章内容篇幅有限今天的内容就分享到这里文章结尾我想提醒您文章的创作不易如果您喜欢我的分享请别忘了点赞和转发让更多有需要的人看到。同时如果您想获取更多前端技术的知识欢迎关注我您的支持将是我分享最大的动力。我会持续输出更多内容敬请期待。
