本文详解如何使用 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，性能更优 */
}✅ 完整可运行示例：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px;
border: 2px dashed #666;
margin: 20px;
transition: transform 1s ease;
}
.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;
background-color: #e8f5e8;
text-align: center;
line-height: 30px;
font-size: 14px;
}
/* ✅ 正确：悬停 #div2 时放大 .container */
.container:has(#div2:hover) {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="box-inside" id="div2">div2</div>
</div>
</div>
</body>
</html>⚠️ 重要兼容性提示：
- :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，可实现流畅、高性能的视觉反馈。
