:has() 不支持 :hover 等动态伪类，仅支持 :checked、[attr]、.class 等静态状态；chrome 105+/safari 15.4+ 可用，firefox 当前不支持；hover 场景需用 js 或父元素 hover + 后代选择器。
父元素背景随子元素 hover 变化失效？检查 :has() 浏览器支持和语法边界
直接写 :has(:hover) 多数情况下不生效——不是你写错了，是浏览器限制太严。Chrome 105+、Safari 15.4+ 支持，但 Firefox 目前（2024）仍不支持 :has() 的伪类嵌套，比如 :hover、:focus 等动态状态不能作为 :has() 的参数。能用的只有静态匹配：比如 :checked、:disabled、[data-active] 这类可被 CSS 检测到的“已确定状态”。
所以想靠鼠标悬停子元素来触发父背景变色，目前只能用 JS 或换思路（比如把 hover 绑在父上再用后代选择器）。但如果是 checkbox、radio 或带 data 属性的切换态，:has() 就很可靠。
:has() 中哪些子元素状态真正可用？优先选 :checked 和属性匹配
:has() 当前稳定支持的状态非常有限。以下写法在 Chrome / Safari 中有效：
-
.card:has(input[type="checkbox"]:checked)—— ✅ 有效，:checked是 DOM 属性变更后立即反映的静态状态 -
.menu:has(.submenu[open])—— ✅ 有效，[open]是布尔属性，元素存在即匹配 -
.form:has(.field.error)—— ✅ 有效，class 切换属于 DOM 结构变化，CSS 能感知 -
.container:has(span:hover)—— ❌ 无效，:hover不被当前:has()实现支持
注意：:has() 内部不能用 !important，也不能嵌套另一个 :has()（如 :has(:has(...))）。
实际写法示例：用 checkbox 控制卡片背景色
这是目前最稳妥的 :has() 应用场景——无需 JS，纯 CSS 响应用户交互：
/* HTML 结构：
<label class="card">
<input type="checkbox"><span>点击切换背景</span>
</label>
*/
.card {
background: #f8f9fa;
padding: 1rem;
border-radius: 4px;
}
.card:has(input:checked) {
background: #007bff;
color: white;
}
关键点：
- 必须把
<input>放在父元素内部，且不能 display: none（否则某些浏览器无法触发状态检测），建议用position: absolute; opacity: 0;隐藏 - 不要用
label[for]+ 外部 input，因为外部 input 不在:has()查找范围内 - 移动端点击区域要够大，可给
input加width: 100%; height: 100%并包裹在 flex 容器里
替代方案：当 :has() 不适用时，用 JS 监听事件更可控
如果非得响应 :hover 或 :focus 这类瞬时状态，:has() 就不是解。这时用 JS 直接操作 class 更直接：
document.querySelectorAll('.interactive-card').forEach(card => {
const trigger = card.querySelector('.trigger-child');
trigger.addEventListener('mouseenter', () => {
card.classList.add('hovered');
});
trigger.addEventListener('mouseleave', () => {
card.classList.remove('hovered');
});
});
CSS 配合：
.interactive-card.hovered { background: #e9ecef; }
比起强行用 :has() 卡兼容性，这种写法在所有浏览器都稳，且逻辑清晰。尤其当需要链式判断（比如“子元素 hover 且兄弟元素有 class”）时，JS 的条件表达能力远超 CSS。
真正容易被忽略的是：很多人以为 :has() 是万能父选择器，其实它只对“结构确定、状态可枚举”的场景友好；一旦涉及运行时动态伪类或复杂逻辑，就得退回到 JS —— 这不是倒退，是技术边界的合理分工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
