SCSS：如何根据兄弟元素的子元素类修改元素样式？

结论是纯SCSS/CSS无法直接实现这个需求，核心限制来自CSS选择器的单向性：它只能沿着DOM树向下（子元素）或向后（后续兄弟元素）选择，无法向上回溯父元素，也没法让某个子元素的状态触发所有同级父元素的样式变化。

现有CSS选择器能覆盖的范围 #

你可以用:has()选择器（现代浏览器支持）选中包含.child.expand的.element本身，以及它之后的所有同级.element，但无法影响它之前的.element：

// 选中包含.expand子元素的.element本身
.element:has(.child.expand) {
  color: red;
}

// 选中包含.expand子元素的.element之后的所有同级.element
.element:has(.child.expand) ~ .element {
  color: red;
}

但这显然无法覆盖所有.element。

可行的解决方案 #

1. 借助JavaScript添加容器类

检测到存在.child.expand时，给所有.element的父容器添加一个标识类，再通过SCSS统一设置样式：

// SCSS代码
.has-expanded-child .element {
  color: red;
}

对应的JavaScript代码（假设外层容器有类parent-container）：

const parent = document.querySelector('.parent-container');
if (parent.querySelector('.child.expand')) {
  parent.classList.add('has-expanded-child');
}

2. 框架环境下用状态控制

如果是React等框架项目，可以通过状态管理（比如useState）跟踪是否存在展开的子元素，然后给所有.element动态绑定样式类：

// React示例
const [hasExpand, setHasExpand] = useState(false);

// 组件挂载或子元素状态变化时检测
useEffect(() => {
  setHasExpand(!!document.querySelector('.child.expand'));
}, []);

// 渲染时给所有.element加类
<div className="parent-container">
  {elements.map(el => (
    <div className={`element ${hasExpand ? 'expanded-sibling' : ''}`}>
      <div className={`child ${el.isExpand ? 'expand' : ''}`}></div>
    </div>
  ))}
</div>

对应的SCSS：

.element.expanded-sibling {
  color: red;
}

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