用 :has() 可实现悬停某张卡片时同步高亮同组其他卡片，关键在于将 hover 检测提升至公共父容器（如 .card-group），再通过 .card-group:has(.card:hover) .card 统一控制所有目标卡片，无需 JS、不改 HTML 结构、不依赖 nth-child 或具体 class 绑定。
用 :has() 监听多列卡片中任一子项 hover 状态
不需要 JS，也不用给每张卡片加 class 或改 HTML 结构，就能让「悬停某张卡片时，同步高亮同组其他卡片」。关键在于把 hover 检测上提到公共父容器，再用 :has() 反向驱动所有目标卡片。
常见错误是直接写 .card:hover 然后试图影响兄弟卡片——这在 CSS 里做不到，因为选择器不能“向上”或“跨级”匹配。必须换思路：监听父容器是否包含被 hover 的卡片。
- 结构上确保所有需联动的卡片都在同一个父容器内（如
.card-group） - 给卡片统一 class（如
.card），避免用nth-child绑定具体位置 - 用
.card-group:has(.card:hover)作为触发条件，再通过后代选择器统一控制所有.card
示例：
.card-group:has(.card:hover) .card {
opacity: 0.7;
transform: scale(0.98);
}
.card-group:has(.card:hover) .card:hover {
opacity: 1;
transform: scale(1);
z-index: 2;
}
:has() + :hover 联动时的 DOM 顺序陷阱
如果你发现规则不生效，大概率是 :has() 内部的选择器没匹配到真实 DOM 节点。它对元素层级和类型很敏感，不是“看起来像”就行。
-
:has(.card:hover)只匹配.card是.card-group的**直接子元素或后代**；如果卡片被包在里，就得写成:has(.wrapper .card:hover)- 不要混用
:nth-child和类名组合（如:has(.card:nth-child(2):hover)），除非你确定该位置上一定是.card——中间插入注释、空格文本节点都会破坏nth-child计数- 更鲁棒的写法是
:has(.card:hover)配合.card-group > .card，明确限定层级关系多列布局下 hover 联动的性能与兼容性权衡
纯 CSS 实现看似轻量，但
:has()在复杂嵌套或大量卡片时可能触发频繁重排，尤其在低配设备上。- Chrome 105+、Firefox 121+、Safari 15.4+ 原生支持；Edge 同 Chrome；旧版 Safari（
- 避免在
:has()中使用过于宽泛的选择器（如:has(*)或:has(div div:hover)），会显著拖慢样式计算 - 若卡片数量超过 50 张，建议配合
will-change: opacity提前提示渲染引擎优化
需要区分「悬停本体」和「被联动项」时怎么写
上面例子是全组一起变，但有时你需要「只高亮其他卡片，保持当前这张突出」，这就得靠状态隔离。
- 用
:not(:hover)排除当前元素：.card-group:has(.card:hover) .card:not(:hover) - 注意：这个
:not(:hover)是作用在每个.card上的，不是父容器的否定，所以不会干扰:has()的触发逻辑 - 如果卡片内部有按钮、链接等可交互子元素，记得加
pointer-events: none到非目标区域，防止 hover 中断
真正容易被忽略的是：当卡片内容含
iframe、video或第三方组件时，它们可能拦截鼠标事件，导致:hover失效——这时:has()就完全收不到信号了。 - 不要混用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
