17370845950

本文详解如何使用 :has() 伪类实现「鼠标悬停子元素时放大其祖先容器」的效果，指出常见选择器错误，并提供兼容性提醒与可运行代码示例。

在 CSS 中，让父容器响应子元素的 :hover 状态曾长期受限于“无法向上选择”的限制，但现代浏览器已支持 :has() 伪类，使其成为简洁可靠的解决方案。关键在于：:has() 必须直接作用于目标父元素，且选择器内部仅需描述匹配条件，不可重复指定目标元素本身。

例如，原代码中错误地写作：

.container:has(#div2:hover) .container { /* ❌ 错误：.container 后又写 .container */
  transform: scale(1.2);
}

这实际是在查找 .container 内部的 另一个 .container（即后代容器），而 HTML 结构中并不存在嵌套容器，导致样式完全不生效。

✅ 正确写法应为：

.container:has(#div2:hover) {
  transform: scale(1.2);
  transition: transform 0.3s ease; /* 推荐细化 transition 属性，避免 all 带来意外副作用 */
}

完整可运行示例：

  
    div2
  

⚠️ 重要注意事项：

• :has() 目前在 Firefox（截至 v128）仍不支持，Safari 自 v15.4、Chrome 自 v105 起已稳定支持；生产环境若需全浏览器兼容，建议搭配 JavaScript 方案（如监听 mouseenter/mouseleave 事件切换 class）。
• transition 推荐明确指定 transform，而非 all，以避免触发不必要的重绘与性能损耗。
• #div2 是 ID 选择器，确保页面中唯一；若需复用逻辑，可改用类名（如 .trigger:hover）并配合 :has(.trigger:hover)。

总结：:has() 是实现“子触父变”的声明式利器，但务必保证语法精准——父选择器后紧跟 :has(...)，内部只写匹配条件，不重复自身。结合渐进增强策略，即可兼顾现代性与兼容性。