CSS定位子元素包含特定 class 的父元素

要定位子元素包含特定 class 的父元素,可以使用 CSS 选择器中的 :has() 选择器,但是这个选择器目前还没有得到广泛的浏览器支持。目前使用 :has() 选择器的最佳方式是使用 jQuery 或其他类似的 JavaScript 库。以下是一个使用 jQuery 的例子:

<div class="parent">
  <div class="child">不合适的子元素</div>
</div>
<div class="parent">
  <div class="child other-class">正确的子元素</div>
</div>
// 使用 jQuery 的选择器定位父元素
var parent = $('.parent:has(.child.other-class)');

在这个例子中,我们使用了 jQuery 的 :has() 选择器,它会选择包含匹配的子元素的父元素。我们选择了所有 class 包含 parent 并且包含子元素 class 为 child other-class 的父元素。

请注意,:has() 在大多数原生的浏览器中并不支持,因此在开发时,请考虑使用更常规的解决方案,如通过 DOM 遍历或其他方法手动查找父元素。

posted @   槑孒  阅读(1332)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示