如何在LESS中从深层嵌套HTML元素定位外层祖先元素（含div与span交替嵌套场景）？

首先得明确一个核心点：CSS本身没有原生的"反向父选择器"，LESS作为预处理器只是帮你更便捷地编写CSS，没法突破这个限制。不过针对你的需求，我们可以结合现代CSS的特性或者少量JS来实现，同时满足你要求的LESS代码结构。

你的写法为什么不生效？ #

你之前的代码里错误地使用了LESS的&引用符。&在LESS中是当前父选择器的指代，比如在.parent1 .class1.class2这个块里，&就等同于.parent1.class1.class2。你的写法编译后会变成：

div.parent.some-other-class .parent1.class1.class2 div.parent3 .parent1.class1.class2 span.parent2 {
  /* 样式 */
}

这显然完全不符合你想要的选择器逻辑——CSS选择器是从左到右表示"父→子"的层级关系，你把父选择器放在了后代选择器后面，自然不会生效。

方案1：使用CSS :has()伪类（现代浏览器支持） #

如果你的项目不需要兼容旧浏览器（比如IE），:has()伪类就是完美解决方案，它可以让你选择包含指定后代元素的父元素。结合LESS的嵌套，你可以这样写，完全符合你要求的.parent1内部结构：

.parent1 {
  // 当顶层div同时有class1、class2，且包含指定深层元素时应用样式
  &.class1.class2:has(.parent2 .parent3 .parent4.some-other-class) {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    // 其他你需要的样式
  }
}

编译后的CSS会是：

.parent1.class1.class2:has(.parent2 .parent3 .parent4.some-other-class) {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

这个选择器会精准选中那些包含.parent4.some-other-class的.parent1.class1.class2元素，完全满足你的需求。

方案2：兼容旧浏览器（配合JavaScript） #

如果必须支持不支持:has()的浏览器，那只能用JS来辅助：当.parent4被添加some-other-class时，给顶层的.parent1.class1.class2添加一个额外的样式类，然后在LESS里针对这个类写样式，同样保持结构在.parent1内部：

LESS代码： #

.parent1 {
  &.class1.class2.highlight-parent {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    // 其他样式
  }
}

JavaScript代码： #

// 监听目标元素的类变化，或者直接在添加some-other-class的逻辑里执行
const targetElements = document.querySelectorAll('.parent4.some-other-class');
targetElements.forEach(el => {
  // 找到最近的顶层父元素
  const topParent = el.closest('.parent1.class1.class2');
  if (topParent) {
    topParent.classList.add('highlight-parent');
  }
});

// 如果需要在类移除时也同步移除样式类，可以用MutationObserver监听
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      const el = mutation.target;
      const topParent = el.closest('.parent1.class1.class2');
      if (!topParent) return;
      
      if (el.classList.contains('some-other-class')) {
        topParent.classList.add('highlight-parent');
      } else {
        topParent.classList.remove('highlight-parent');
      }
    }
  });
});

// 给所有.parent4元素添加监听
document.querySelectorAll('.parent4').forEach(el => {
  observer.observe(el, { attributes: true });
});

总结 #

• 优先推荐使用:has()方案，代码最简洁，完全用CSS/LESS实现，符合你的结构要求；
• 旧浏览器兼容场景下，用JS给顶层父元素添加额外类是唯一可行的CSS方案；
• 记住LESS的&是指代当前父选择器，不能用来反向定位父元素，必须遵循CSS选择器的"父在前、后代在后"的逻辑。

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