本文详解如何通过现代 css 的 `:has()` 伪类，在子元素（如 `.box-inside`）被悬停时，精准触发其祖先容器（如 `.container`）的缩放动画，并指出常见选择器错误与浏览器兼容性关键注意事项。
在实际开发中，我们常希望实现“子控父”的交互效果——例如鼠标悬停在内部按钮或卡片上时，让整个外层容器平滑放大。传统 CSS 无法向上选择父元素，但 CSS Level 4 引入的 :has() 伪类正为此而生。
核心原理是：:has(
/* ❌ 错误写法：多写了 .container */
.container:has(#div2:hover) .container {
transform: scale(1.2);
}该选择器实际匹配的是「.container 内部、且满足 :has(#div2:hover) 条件的另一个 .container」——即嵌套的子容器，而非当前容器自身。这导致样式完全不生效。
✅ 正确写法只需移除冗余的 .container，直接对目标容器应用样式：
立即学习“前端免费学习笔记（深入）”；
.container:has(#div2:hover) {
transform: scale(1.2);
transition: transform 1s ease; /* 推荐单独过渡 transform，性能更优 */
}完整可运行示例：
div2
⚠️ 重要注意事项：
- 浏览器兼容性：:has() 目前在 Chrome 105+、Edge 105+、Safari 15.4+ 中原生支持；Firefox 尚未支持（截至 Firefox 128）。生产环境使用前务必检查 MDN 兼容性表，并考虑降级方案（如 JavaScript 监听 mouseenter/mouseleave 添加 class）。
- 性能提示：避免在 :has() 中使用过于复杂的选择器（如深层嵌套或通配符），可能影响渲染性能。
- 过渡优化：建议仅对 transform 和 opacity 等可硬件加速的属性设置 transition，避免使用 all 或 width/height 等触发布局重排的属性。
总结：:has() 是实现“子触发父样式”的简洁利器，但需确保选择器语义准确、兼顾兼容性，并遵循 CSS 性能最佳实践。
