CSS 中 ~ 选择器仅支持后续兄弟元素，无法反向影响前序兄弟；要实现“悬停任一侧时隐藏另一侧文本”的双向效果，需改用现代 CSS 的 :has() 伪类配合容器作用域。
css 中 `~` 选择器仅支持后续兄弟元素，无法反向影响前序兄弟；要实现“悬停任一侧时隐藏另一侧文本”的双向效果，需改用现代 css 的 `:has()` 伪类配合容器作用域。
在 CSS 布局中，开发者常希望通过 :hover 触发相邻元素样式的改变，例如：当鼠标悬停在左侧区域时，右侧文字淡出；反之亦然。但使用 .left:hover ~ .right p 这类后续兄弟选择器时，只能从左向右生效，而 .right:hover ~ .left p 则完全无效——因为 .left 在 HTML 结构中位于 .right 之前，不满足 ~（后续兄弟）的选择条件。
根本原因在于：CSS 选择器是单向流式解析的，~ 和 + 等关系选择器均严格遵循 DOM 树中的顺序，无法向上查找或反向匹配。因此，传统纯 CSS 方案在此场景下存在天然限制。
✅ 正确解法：使用 :has() 伪类（CSS Selectors Level 4），它允许基于子元素状态反向影响父容器及其后代：
.container:has(.left:hover) .right {
opacity: 0;
}
.container:has(.right:hover) .left {
opacity: 0;
}
该写法语义清晰：当 .container 内部存在被悬停的 .left 元素时，其内部的 .right 元素应用 opacity: 0；同理处理右侧悬停逻辑。
⚠️ 注意事项：
-
:has()已获主流浏览器支持（Chrome 105+、Firefox 121+、Safari 15.4+），但 IE 完全不支持，旧版 Edge（≤113）亦不可用； - 若需兼容更老环境，应降级为 JavaScript 方案（如监听
mouseenter/mouseleave并切换 class）； -
:has()不能用于 CSS@keyframes或部分伪元素中，且过度嵌套可能影响性能，建议仅用于明确的父子/兄弟状态联动场景。
? 小技巧：可添加 transition: opacity 0.2s ease 提升视觉反馈流畅度：
.left p, .right p {
transition: opacity 0.2s ease;
}
总结：CSS 的局限性常源于选择器模型的设计约束，而非语法错误。理解 ~ 的单向性与 :has() 的声明式反向能力，是写出健壮、可维护交互样式的关键。优先采用标准 CSS 方案，在必要时再引入 JS 作为渐进增强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
