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 @ 2023-04-27 14:28  槑孒  阅读(1002)  评论(0编辑  收藏  举报