本文详解如何使用 css `:has()` 伪类实现“悬停子元素时放大父容器”的交互效果，修正常见选择器错误，并提供兼容性提醒与可运行代码示例。
在现代 CSS 开发中，:has() 是首个真正支持“父选择器”逻辑的伪类，使我们能基于后代或兄弟元素的状态来样式化祖先元素。例如，当用户悬停在子元素 #div2 上时，希望 .container 整体放大 —— 这正是 :has() 的典型应用场景。
但需特别注意选择器书写规范。原代码中存在关键错误：
.container:has(#div2:hover) .container { /* ❌ 错误：重复选中 .container */
transform: scale(1.2);
}该写法实际匹配的是「.container 内部的 .container」（即嵌套容器），而你的 HTML 中并不存在嵌套结构，因此规则完全不生效。正确写法应直接作用于目标容器自身：
.container:has(#div2:hover) {
transform: scale(1.2);
transition: transform 1s ease; /* 推荐单独过渡 transform，性能更优 */
}✅ 完整可运行示例：
立即学习“前端免费学习笔记（深入）”；
div2
⚠️ 重要兼容性提示：
- :has() 已被 Chrome 105+、Edge 105+、Safari 15.4+ 原生支持；
- Firefox 目前（截至 v128）仍不支持（MDN 兼容性表）；
- 如需全浏览器兼容，建议搭配 JavaScript 方案（如监听 mouseenter/mouseleave 事件切换类名），例如：
document.getElementById('div2').addEventListener('mouseenter', () => {
document.querySelector('.container').classList.add('hovered');
});
document.getElementById('div2').addEventListener('mouseleave', () => {
document.querySelector('.container').classList.remove('hovered');
});.container.hovered { transform: scale(1.2); transition: transform 1s ease; }总结：:has() 极大简化了“反向状态控制”的 CSS 逻辑，但务必确保选择器语义准确、避免冗余层级，并始终检查目标浏览器的支持情况。合理搭配 transition 属性与 transform，可实现流畅、高性能的视觉反馈。
