通过 react 状态联动与条件类名，可在 container2 的 preview 子元素可见时，为前一个兄弟元素 container1 动态添加 css 样式；纯 css 无法跨兄弟元素响应子元素状态，必须借助 react 状态驱动类名控制。
通过 react 状态联动与条件类名，可在 container2 的 preview 子元素可见时，为前一个兄弟元素 container1 动态添加 css 样式；纯 css 无法跨兄弟元素响应子元素状态，必须借助 react 状态驱动类名控制。
在你提供的结构中，Container1 和 Container2 是同级兄弟元素，而 Container2 内部是否渲染
取决于其局部状态 preview。关键点在于：
CSS 选择器（包括 +、~ 或 :has()）无法直接根据某个元素的子元素是否存在或是否显示，来反向影响其前面的兄弟元素
。
:has() 伪类虽支持 :has(.preview) 检测后代存在，但
不支持向前选择（即无法选中 .container-2 前面的 .container-1）
；
目前（截至 CSS Selectors Level 4）
没有 CSS 机制能从后往前影响兄弟节点的样式
；
因此，必须将 preview 状态“提升”或“共享”，使 Container1 能感知该状态并响应。
✅ 推荐做法：
状态提升 + 条件类名
将 preview 状态从 Container2 提升至共同父组件（如 element），再分别传给两个容器：
配套 CSS 示例：
⚠️ 注意事项：
不要使用 className={preview ? "container-1 special" : "container-1"} —— 这会覆盖基础样式；推荐用 className={container-1 ${preview ? 'preview-active' : ''}`` 保持样式叠加；
若 Container1 需要复用且不依赖外部状态，也可使用 useContext 或自定义 Hook 统一管理 preview 状态；
浏览器对 :has(.preview) 的支持仍有限（Chrome 105+、Safari 15.4+ 支持，Firefox 尚未完全支持），且即使支持，也无法解决“前兄弟元素”问题，故不可依赖。
总结：该需求本质是
跨组件的状态响应
，属于典型的 React 数据流问题，而非纯样式问题。务必以状态驱动类名为核心方案，兼顾可维护性与兼容性。
const element = () => {
const [preview, setPreview] = useState(true);
return (
.container-1 {
padding: 12px;
border: 1px solid #ddd;
transition: background-color 0.2s;
}
.container-1.preview-active {
background-color: #e6f7ff;
border-color: #1890ff;
}