纯 css 只能正向影响后续兄弟元素，无法逆序选择；:has() 是唯一可突破方向限制的方案，支持同级批量响应，但要求父容器结构固定且现代浏览器支持。
纯 CSS 能做到，但有明确限制：只能影响「后面的」兄弟元素，不能反向选前面的；要批量联动同类型兄弟元素，得靠 :has() —— 它是目前唯一能绕过传统方向限制的方案。
兄弟元素必须同级且顺序固定
所有基于 + 或 ~ 的选择器都依赖 DOM 顺序。如果 HTML 中 .trigger 写在 .target 前面，.trigger:hover + .target 才生效；反过来就完全无效。
-
+只匹配紧邻下一个兄弟（如div:hover + p） -
~匹配后面所有同级兄弟（如div:hover ~ p） - 中间插入其他元素会中断
+，但不影响~ - 父容器不能变动结构，否则选择器失效
:has() 实现「任意位置」的批量响应
想让所有 .red-row 在任一同行悬停时同时高亮？必须用 :has() 把样式逻辑上提至共同父容器。
- 写法：
.row-group:has(.red-row:hover) .red-row { background: #ffebee; } - 注意：
:has()参数里不能用伪类嵌套（比如:has(.x:hover .y)合法，但:has(.x:hover:hover)不合法） - 当前（2026年中）Chrome 119+、Firefox 125+、Safari 17.4+ 支持，Edge 同步 Chromium 版本
- 不支持 IE 和旧版 Safari，需降级 fallback
常见错误：误以为 hover 能跨父级或逆序生效
很多人写 .a:hover .b 发现没反应，其实是 .b 不在 .a 内部；或者写 .b:hover ~ .a 想影响前面的元素，但 ~ 只往后找。
-
.x + .y和.x ~ .y都要求.x和.y是同一父元素下的直系子元素 - 父子关系用空格（
.parent:hover .child），兄弟关系才用+或~ - 若目标元素被包裹在多层内，必须逐级写出路径，不能跳级
真正难的是处理「非相邻」「跨层级」「逆序影响」这三类需求——前两个靠 :has() 能解，最后一个至今没有纯 CSS 方案，必须换 DOM 结构或加 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
