如何在SCSS中为相邻兄弟含特定子元素的div设置样式

首先得明确一个关键点：CSS（包括Sass编译后的CSS）本身没有反向选择器——也就是说，你没法直接通过“后面的兄弟元素包含某个子元素”这个条件，来给前面的.kumar元素设置样式。因为CSS选择器的解析是单向的，只能从父到子、从前到后，不能反过来找前面的元素。

不过我们有几个可行的替代方案，根据你的场景选择：

方案1：调整HTML结构，添加状态类（最推荐） #

这是最简洁可靠的方案，只需要给父容器.btnGroup或者.kumar本身添加一个状态类，比如当.pavan里存在.atlanta时，给.btnGroup加上has-atlanta类。然后在Sass里这样写：

.btnGroup {
  // 基础样式
  
  &.has-atlanta {
    .kumar {
      // 当满足条件时的样式，比如：
      background-color: #2563eb;
      padding: 8px 16px;
    }
  }
}

对应的HTML就变成：

<div class="btnGroup has-atlanta">
  <div class="kumar"></div>
  <div class="pavan">
    YourName
    <div class="atlanta" href="#">Primary Action</div>
  </div>
</div>

如果是动态生成的内容，你可以在渲染的时候判断是否存在.atlanta，然后决定是否添加这个状态类。

方案2：用JavaScript检测并添加样式类 #

如果没法修改HTML的渲染逻辑，那可以用JS来动态检测条件，给.kumar添加样式类：

// 遍历所有.btnGroup容器
document.querySelectorAll('.btnGroup').forEach(group => {
  const kumar = group.querySelector('.kumar');
  const pavan = kumar.nextElementSibling;
  // 检查pavan里是否有.atlanta元素
  if (pavan && pavan.querySelector('.atlanta')) {
    kumar.classList.add('has-adjacent-atlanta');
  }
});

然后在Sass里写对应的样式：

.kumar {
  // 基础样式
  
  &.has-adjacent-atlanta {
    // 满足条件时的样式
    border: 1px solid #ef4444;
  }
}

为什么Sass本身没法直接解决？ #

Sass只是CSS的预处理器，它最终会编译成普通的CSS。而CSS的选择器规则里，没有任何语法能实现“选择前面的兄弟元素，当后面的兄弟包含某个子元素”这种逻辑。你之前查阅的父选择器、前兄弟选择器确实都不存在于当前的CSS标准里，所以只能通过上面的变通方案来实现。

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