通过 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），再分别传给两个容器：
const element = () => {
const [preview, setPreview] = useState(true);
return (
<div>
<container1 isactive="{preview}"></container1><container2 preview="{preview}" setpreview="{setPreview}"></container2>
</div>
);
};
const Container1 = ({ isActive }: { isActive: boolean }) => {
return (
<div classname="{`container-1" :>
{/* 可选：此处可添加内容 */}
</div>
);
};
const Container2 = ({
preview,
setPreview
}: {
preview: boolean;
setPreview: (v: boolean) => void;
}) => {
return (
<div classname="container-2">
{preview && <div classname="preview">Preview Content</div>}
</div>
);
};
配套 CSS 示例：
.container-1 {
padding: 12px;
border: 1px solid #ddd;
transition: background-color 0.2s;
}
.container-1.preview-active {
background-color: #e6f7ff;
border-color: #1890ff;
}
⚠️ 注意事项：
- 不要使用 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 数据流问题，而非纯样式问题。务必以状态驱动类名为核心方案，兼顾可维护性与兼容性。
