本文详解如何使用 :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 带来意外副作用 */
}完整可运行示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px;
border: 2px dashed #666;
margin: 20px;
display: inline-block;
}
.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: #e8f5e9;
text-align: center;
line-height: 30px;
font-size: 14px;
}
/* ✅ 正确：直接对 .container 应用 :has() 条件 */
.container:has(#div2:hover) {
transform: scale(1.2);
transition: transform 0.3s ease;
box-shadow: 0 0 12px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="box-inside" id="div2">div2</div>
</div>
</div>
</body>
</html>⚠️ 重要注意事项：
- :has() 目前在 Firefox（截至 v128）仍不支持，Safari 自 v15.4、Chrome 自 v105 起已稳定支持；生产环境若需全浏览器兼容，建议搭配 JavaScript 方案（如监听 mouseenter/mouseleave 事件切换 class）。
- transition 推荐明确指定 transform，而非 all，以避免触发不必要的重绘与性能损耗。
- #div2 是 ID 选择器，确保页面中唯一；若需复用逻辑，可改用类名（如 .trigger:hover）并配合 :has(.trigger:hover)。
总结：:has() 是实现“子触父变”的声明式利器，但务必保证语法精准——父选择器后紧跟 :has(...)，内部只写匹配条件，不重复自身。结合渐进增强策略，即可兼顾现代性与兼容性。
