描述`：has（）`pseudo-class（父挑选器）

CSS中的：has（）伪级允许基于父元素的子元素来靶向父元素。它通过使用语法parent：ham-selector来有条件地应用样式来起作用。例如，DIV：HAS（IMG）将样式应用于包含图像的DIV。多个选择器可以与commas一起使用，例如div：has（img，p.pecial）。常见用例包括样式容器，表单验证反馈以及带有子菜单的菜单项。尽管Firefox截至2024年底，但在Chrome，Safari和Edge等现代浏览器中提供了浏览器的支持。考虑因素包括性能影响，非动力行为以及在不支持环境中对后备的需求。

:has()伪级是一个强大的CSS选择器，它允许您根据其中的特定子元素或条件的存在来靶向父元素。在以前:has()引入了CSS中没有本地方法可以根据其子女选择父母 - 开发人员必须依靠JavaScript或手动添加额外的课程。现在，使用:has() ，仅使用CSS就可以做到这一点。

如何使用:has()

:has()通过将选择器作为参数并匹配任何包含其中至少一个匹配元素的元素来工作。语法看起来像：

父母：有（儿童选择）{
  / *样式 */
}

例如，如果仅在包含<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251076578590.jpeg" class="lazy" alt="描述`：has（）`pseudo-class（父挑选器）" >的情况下才想设计<div> ，则可以写下：

 DIV：HAS（IMG）{
  边界：2px固体绿色；
}

这仅将边框应用于直接包含图像标签的那些div元素。

您还可以在内部链接多个选择器:has()使用逗号，例如：

 DIV：HAS（IMG，P.Special）{
  背景色：＃f0f0f0;
}

此规则将与具有img和p ant Class special的任何div匹配。

常见用例:has()

• 造型容器有条件地：例如，仅在包含视频时才将不同的填充或边距应用于卡布局。
• 形式验证反馈：当需要输入无效时，突出显示了一个形式组。
• 带有子菜单的菜单项：仅将箭头或指示器应用于嵌套列表的菜单项。

这是一个现实世界的示例：

李：有（ul）{
  位置：相对；
  垫右：20px;
}

李：有（ul）::之后{
  内容：'▾';
  位置：绝对；
  右：5px;
}

这将下拉指示器添加到包含子菜单（ <ul></ul> ）的任何列表项，从而使您的导航UI更直观而无需添加额外的标记。

浏览器支持和考虑

截至目前，在大多数现代浏览器（V105），Safari（V15.4）和Edge（V106）等大多数现代浏览器中都支持:has() 。截至2024年底，Firefox的支持仍在等待中，因此，如果您以广泛的访问为目标，则必须检查兼容性。

另外，请记住：

• :has()如果过度使用或与复杂的选择器一起使用会影响性能。
• 它的动态不是与JavaScript相同的方式 - 仅在渲染时间进行评估。
• 避免在关键的布局中使用它，除非有不受支持的浏览器的后备。

如果您在生产中使用它，请考虑特征检测或渐进式增强策略，以确保您的网站在任何地方仍然可用。

基本上， :has()为CSS提供了基于结构的有条件样式的长时间错失工具。虽然尚未得到普遍的支持，但绝对值得尝试并计划将来使用。

以上是描述`：has（）`pseudo-class（父挑选器）的详细内容。更多信息请关注PHP中文网其他相关文章！