:has() 是目前最接近纯 CSS 实现“父响应子”的方式，选中祖先元素并基于子元素条件触发样式，但需注意语法位置、括号内伪类兼容性及性能优化。
:has() 本身不是父元素选择器，它选中的仍是“祖先元素”，但能基于子元素条件触发样式——这是目前最接近纯 CSS 实现“父响应子”的方式。只要浏览器支持（Chrome 105+、Firefox 121+、Safari 15.4+），且写法合规，就能直接生效，无需 JS 或改 HTML。
为什么 :has() 写了却没反应？
常见失效不是语法错，而是环境或组合违规：
-
:has()不能出现在选择器开头以外位置，比如.card :has(.badge)（中间有空格）完全无效，必须写成.card:has(.badge) - 括号内用了不被支持的伪类，如
:focus、:hover、::before，整条规则会被浏览器静默丢弃（DevTools 里都看不到） - Safari 15.4–16.3 对
+ .sibling或~ .sibling这类兄弟选择器在:has()内的支持不稳定，例如h2:has(+ p)可能不匹配 - CSS-in-JS 或 Vue
<style scoped></style>中未启用实验性语法（如 Emotion 需配css={{ '&:has(...)': {...} '}}，Vue CLI 项目需升级vue-loader并开启experimentalFeatures: { inspect: true }）
:has() 里能写什么、不能写什么？
括号内必须是“能实际匹配真实 DOM 节点”的选择器，不是所有伪类都行：
- ✅ 安全可用：
input:checked、[data-status="error"]、img[src*="icon"]、button:disabled、:valid、:invalid、:placeholder-shown、:not(:placeholder-shown) - ❌ 明确禁用：
:focus、:hover、::before、::after、:empty（:has()自身已让父非空，:empty永远不成立） - ⚠️ 替代建议：用
:not(:placeholder-shown)代替:not(:empty)判断输入是否非空；用input:invalid而非input[value=""]（后者读的是初始属性值，不随输入更新）
表单场景下最稳的写法示例
这是当前兼容性最好、语义最清晰的落地方式：
立即学习“前端免费学习笔记（深入）”；
label:has(input:not(:placeholder-shown):valid) {
border: 2px solid #28a745;
padding: 8px;
}
.form-group:has(input:invalid) .error-msg {
display: block;
}
关键点：
-
input:not(:placeholder-shown)表示 placeholder 已消失（用户输过内容），比input[value!=""]可靠得多 - 加
:valid可过滤掉“有输入但格式错误”的情况（如邮箱少 @） - 避免用
input:focus做条件——焦点切换快，样式容易闪动或不同步 - 如果用了
required，建议组合:valid，否则提交空值后也会触发:invalid，但用户可能根本没点过该字段
真正容易被忽略的是性能敏感点：div:has(*) 或 section:has(*:hover) 这类宽泛写法会强制浏览器频繁重计算样式，尤其在滚动或悬停密集区域，可能引发卡顿。优先用具体类名、属性或状态限定范围。
