Less中如何在存在指定子class时为父元素设置样式属性？

首先明确：Less是CSS预编译语言，不具备运行时DOM检测能力，最终会编译为静态CSS代码，这个效果核心依托CSS原生:has()关系伪类实现，Less仅需按嵌套语法书写即可。

参考DOM结构 #

你给出的示例DOM存在标签未闭合问题，修正后的标准结构如下：

<div class="parent">
  <div class="child">目标子元素</div>
  <div class="morechild">其他子元素</div>
</div>

纯CSS（Less嵌套写法）实现 #

直接在父选择器内通过&引用父级，搭配:has()伪类写匹配规则即可：

.parent {
  // 匹配内部存在 .child 后代元素的 .parent 元素
  &:has(.child) {
    background-color: #f0f2f5; // 替换为你需要的背景色值
  }
}

规则说明 #

• 上述代码编译后生成的原生CSS为 .parent:has(.child) { background-color: #f0f2f5; }，只要.parent内部任意层级存在.child元素，就会给父元素应用背景色
• 如果你要求.child必须是.parent的直接子元素才触发样式，只需要把选择器改为&:has(> .child)即可

兼容性提示 #

:has() 伪类已支持所有现代主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+、Edge 105+）。如果需要兼容IE等老旧浏览器，无法纯靠CSS实现，需要加JS逻辑兜底。

老旧浏览器兼容兜底方案 #

通过JS检测DOM结构，给符合条件的父元素追加专属类名，再通过Less写对应类的样式：

// 页面加载完成后执行检测
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.parent').forEach(parent => {
    // 检测当前父元素下是否存在目标子元素
    if (parent.querySelector('.child')) {
      parent.classList.add('has-child-bg')
    }
  })
})

对应的Less代码：

.parent.has-child-bg {
  background-color: #f0f2f5;
}

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