如何通过CSS/JS/jQuery根据子元素样式化多层级祖先div#one

嘿，我来帮你搞定这个多层嵌套下的样式问题！你遇到的核心问题是CSS原生长期缺乏真正的“父选择器”支持，不过现在已经有解决方案了，不管是用现代CSS还是JS/jQuery都能实现需求，下面给你详细拆解：

一、现代CSS方案：用:has()伪类实现（推荐，简洁高效） #

现在Chrome、Edge、Safari等主流现代浏览器已经支持:has()伪类了，它就是你想要的“父选择器”，能直接选中包含指定子元素的父元素，哪怕子元素是多层嵌套的。

针对你的需求，写法非常直观：

#one:has(a[href*="foo"]) {
  background-color: #FF0000;
}

这个选择器的逻辑是：只要id为one的div内部任意层级存在href属性包含foo的a标签，就给这个div加上红色背景。

小提示：Firefox目前需要在about:config里手动开启layout.css.has-selector.enabled才能支持:has()，如果你的项目需要兼容旧浏览器，建议用下面的JS方案。

二、原生JavaScript方案（兼容所有浏览器） #

如果要覆盖更多浏览器场景，原生JS的closest()方法可以完美解决多层嵌套的查找问题：

// 先找到所有符合条件的a标签
const targetLinks = document.querySelectorAll('a[href*="foo"]');

// 遍历每个a标签，向上查找最近的div#one祖先
targetLinks.forEach(link => {
  const targetDiv = link.closest('#one');
  if (targetDiv) {
    // 直接设置样式，或者更推荐添加类名（方便统一管理样式）
    targetDiv.style.backgroundColor = '#FF0000';
    // targetDiv.classList.add('highlight');
  }
});

closest()方法会从当前元素开始向上遍历DOM树，找到第一个匹配选择器的祖先元素，完全适配多层嵌套的结构。如果是动态添加的a标签，你可以把这段代码放到事件回调里，或者用MutationObserver监听DOM变化来自动触发。

三、jQuery方案（如果你项目已经在用jQuery） #

jQuery的closest()方法和原生逻辑一致，写法会更简洁：

// 找到所有href含foo的a标签，再定位到它们的div#one祖先，添加样式
$('a[href*="foo"]').closest('#one').css('background-color', '#FF0000');
// 同样推荐用类名管理样式：
// $('a[href*="foo"]').closest('#one').addClass('highlight');

为什么你之前的选择器失效了？ #

你写的a[href *="foo"] #one:parent有两个关键问题：

1. CSS里根本没有:parent这个伪类，你可能混淆了jQuery的:parent选择器（但它的作用是选中包含子元素的元素，不是找父元素）；
2. 选择器顺序完全反了，你是在找a标签内部的#one元素，这和你的需求完全相反，自然不会生效。

内容的提问来源于stack exchange，提问作者user2284703