基于子元素修改父元素样式：SCSS选择器修改父元素宽度无效问题

看起来你遇到的核心问题是CSS原生没有“反向选择父元素”的能力，原来的SCSS写法其实把样式加到了孙子元素上，而不是它的两级上层父元素，所以父元素宽度没变化。我来帮你拆解问题并给出两种可行方案：

为什么原来的写法无效？ #

你写的SCSS代码：

@include breakpoint(dt) {
  .grandchild {
    .parent & {
      flex-basis: 370px;
      min-width: 370px;
    }
  }
}

编译后的CSS会是这样：

@media (/* 你的dt断点条件 */) {
  .parent .grandchild {
    flex-basis: 370px;
    min-width: 370px;
  }
}

看到没？这个选择器选中的是.parent下的.grandchild元素，样式是应用在孙子元素上的，根本没触碰到.parent，所以父元素的宽度自然不会变。

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

CSS的:has()伪类终于实现了“检测父元素是否包含特定子元素”的能力，这完全符合你的需求。在SCSS里可以这样写：

@include breakpoint(dt) {
  // 匹配所有包含.grandchild的.parent元素
  .parent:has(.grandchild) {
    flex-basis: 370px;
    min-width: 370px;
  }

  // 如果要精确匹配“两级上层”（即.parent -> 子元素 -> .grandchild），可以写得更严谨：
  // .parent:has(> .child > .grandchild) {
  //   flex-basis: 370px;
  //   min-width: 370px;
  // }
}

这个写法会直接选中包含.grandchild的.parent元素，把样式应用到父元素上，完美解决问题。注意:has()目前支持Chrome 105+、Firefox 121+、Safari 15.4+，如果你的项目兼容这些现代浏览器，这是最简单的方案。

方案2：用JavaScript辅助（兼容旧浏览器） #

如果需要支持不兼容:has()的旧浏览器，就需要借助JS来给符合条件的父元素添加额外类名，再通过类名修改样式：

第一步：编写JS逻辑 #

// 找到所有.grandchild元素
document.querySelectorAll('.grandchild').forEach(grandchild => {
  // 找到最近的.parent祖先元素（两级上层正好是最近的.parent）
  const targetParent = grandchild.closest('.parent');
  if (targetParent) {
    // 给父元素添加自定义类名
    targetParent.classList.add('wide-parent');
  }
});

第二步：在SCSS中用类名写样式 #

@include breakpoint(dt) {
  .parent.wide-parent {
    flex-basis: 370px;
    min-width: 370px;
  }
}

这种方式兼容性更好，适合需要支持旧版浏览器的项目。

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