本文详解如何通过 css `:has()` 伪类实现“鼠标悬停子元素时放大其祖先容器”的效果，修正常见选择器错误，并提供兼容性提醒与实用代码示例。
在现代 CSS 开发中，:has() 是一个革命性的关系选择器，它允许我们基于后代或兄弟元素的状态（如 :hover）来样式化祖先元素——这在过去只能依赖 JavaScript 才能实现。但初学者常因选择器书写不当导致失效，最典型的问题就是误写为 .container:has(#div2:hover) .container，意图选中自身却实际匹配了“容器内部的另一个容器”，造成样式不生效。
正确写法应直接对目标容器应用样式：
.container:has(#div2:hover) {
transform: scale(1.2);
transition: transform 1s ease; /* 推荐单独过渡 transform，性能更优 */
}配合结构 HTML：
<div class="container">
<div class="box">
<div class="box-inside" id="div2">div2</div>
</div>
</div>以及基础样式（确保视觉可辨）：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 200px;
aspect-ratio: 1;
display: inline-block;
border: 1px solid red;
}
.box > .box-inside {
margin-left: 40%;
margin-top: 40%;
height: 30px;
width: 30px;
border: 3px solid green;
cursor: pointer;
}✅ 关键要点：
- :has() 内部条件必须真实存在且可匹配：确保 #div2 在 DOM 中唯一且位于 .container 内；
- 避免冗余选择器：.container:has(...) 后无需再写 .container —— 它已精准定位目标元素；
- 性能提示：transform + transition 组合是放大动画的最佳实践，避免触发布局重排（reflow）；
- 过渡属性优化：建议显式指定 transition: transform 1s ease 而非 all 1s，防止意外过渡其他属性（如 border-color）影响性能。
⚠️ 兼容性注意：:has() 目前在 Chrome 105+、Edge 105+、Safari 15.4+ 中原生支持，但 Firefox 尚未支持（截至 Firefox 128）。如需全浏览器兼容，可降级使用 JavaScript 监听事件：
document.getElementById('div2').addEventListener('mouseenter', () => {
document.querySelector('.container').style.transform = 'scale(1.2)';
});
document.getElementById('div2').addEventListener('mouseleave', () => {
document.querySelector('.container').style.transform = 'scale(1)';
});总结：:has() 让 CSS 具备了“反向响应”能力，是构建声明式交互的重要进步。只要写对选择器、关注兼容性、善用硬件加速属性，就能优雅实现子元素驱动父容器的动态变化。
