直接写 .parent:has(.child:hover) 不生效是因为浏览器兼容性限制，safari 15.4+、chrome 105+、firefox 119（需启用标志）才支持，旧版浏览器直接忽略且无 fallback；须用 supports(:has(*)) 检测而非仅查 can i use。
为什么直接写 .parent:has(.child:hover) 不生效？
因为浏览器兼容性卡在了 Safari 15.4+ 和 Chrome 105+，Firefox 到 119 才正式支持（需启用 layout.css.has-selector.enabled）。如果你的项目要兼容旧版 Edge 或 iOS 15.3 及更早系统，:has() 会直接被忽略——连 fallback 都不会触发。上线前务必用 supports(:has(*)) 检测，别只靠 Can I Use 查表。
:has() 中哪些选择器能用、哪些会被拒绝？
它不接受伪元素、:focus-within 这类“间接状态”，也不支持 :has(.child:is(:hover, :active)) 这种嵌套伪类组合。能用的只有基础关系与属性匹配：
-
:has(> .trigger)—— 子元素直接子级，推荐，性能好 -
:has([data-active="true"])—— 属性匹配，稳定且易控制 -
:has(input:checked)—— 表单状态，但注意：不能写:has(input:focus)（焦点不是静态可推导状态） -
:has(.error + .hint)—— 相邻兄弟，可行，但复杂选择器会拖慢计算
怎么避免 :has() 触发重排或样式闪烁？
父元素样式变更如果涉及尺寸、定位或触发 will-change，可能让浏览器反复重算布局。尤其当子元素是动态插入（比如 JS append）时，:has() 的匹配延迟会导致视觉跳变。实操建议：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 优先用
opacity、transform、color这类合成属性做响应，避开width、margin - 给父元素加
contain: style layout（慎用，仅当确认内部变化不影响外部流） - 避免链式写法如
.section:has(.item):has(.item.active):has(.item:last-child)—— 浏览器得跑三次匹配 - 测试时打开 Chrome DevTools → Rendering → “Paint flashing”，看是否意外触发大面积重绘
替代方案：当 :has() 不可用时，JS 最简补位怎么做？
别封装成通用“has-polyfill”库，多数场景一行 class 切换就够了。例如监听子元素 hover：
document.querySelectorAll('.parent').forEach(el => {
const child = el.querySelector('.child');
if (!child) return;
child.addEventListener('mouseenter', () => el.classList.add('child-hovered'));
child.addEventListener('mouseleave', () => el.classList.remove('child-hovered'));
});
对应 CSS 写 .parent.child-hovered { … }。比 MutationObserver 监听 DOM 插入更轻量，也比用 pointer-events: none 配合后代选择器更可控。关键是——别让 JS 去模拟 :has() 的全部语义，只补最关键的 1–2 个状态。
真正麻烦的不是语法，而是你得想清楚：这个“父随子变”的逻辑，到底是 UI 状态的一部分，还是应该由组件 state 驱动。CSS :has() 是锦上添花，不是状态管理的替代品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
