:has()已获主流浏览器支持但存在兼容性限制，Chrome 105+、Edge 105+、Safari 15.4+、Firefox 121+原生支持，IE完全不支持，旧版Android WebView基本不可用，iOS 15.3及更早版本会静默失效。
:has() 现在就能用，但不是所有地方都可靠——它已在 Chrome 105+、Edge 105+、Safari 15.4+ 和 Firefox 121+ 原生支持，但 IE 完全不支持，旧版 Android WebView 也基本不可用。如果你的项目需兼容 iOS 15.3 或更早版本，:has() 会静默失效（不报错，也不生效）。
为什么 :has() 能选“父元素”，而传统 CSS 不能？
传统 CSS 选择器是单向向下匹配的：你写 div p，浏览器从 div 开始找后代 p；但没法反过来，“看到 p 就回头改它上面的 div”。:has() 打破了这个限制，它的逻辑是：“先定位到候选元素（比如 div），再检查它内部是否满足括号里的条件（比如有没有 p）”。被最终选中并应用样式的，永远是冒号前那个元素（div），不是括号里的（p）。
常见误解：
- 误以为
div:has(p)是“选p并影响div” → 实际是“只选那些含p的div” - 误用嵌套：
section:has(div:has(p))→ 当前所有浏览器都不支持多层:has()嵌套，必须扁平化，比如改写成section:has(div p)
:has() 中的兄弟选择器怎么写才生效？
括号内支持 +（相邻兄弟）、~（通用兄弟），但注意方向：它匹配的是“目标元素后面”的兄弟，不是前面的。
立即学习“前端免费学习笔记（深入）”；
例如：
-
h2:has(+ p)→ 选中后面紧跟着<p>的<h2>（h2是主语） -
.v-modal:has(~ .login-dialog)→ 选中后面有.login-dialog兄弟节点的.v-modal（适用于 modal 和 dialog 分离渲染的场景） -
button:has(~ input:invalid)→ 无效输入框后面的按钮变红，可用于表单提交按钮状态联动
注意：:has(+ .class) 不等价于 .class + :has()，后者语法非法 —— :has() 必须紧跟在被选元素之后，不能放在兄弟选择器右侧。
表单验证和动态布局是最稳的两个落地场景
这两个场景结构清晰、条件明确、无需复杂嵌套，适合作为 :has() 的首发实践点。
-
表单容器状态反馈：
.form-group:has(input:invalid)直接给整个表单组加红边框，不用 JS 监听或手动切 class -
响应式网格列数切换：
.grid:has(.item:nth-child(7))表示子项 ≥ 7 个时升为三列，比媒体查询更语义化、更贴近内容本身 -
卡片样式条件化：
.card:has(img)给带图卡片加阴影，.card:has(iframe)自动设宽高比，避免 iframe 撑破布局
性能提示：浏览器对 :has() 的实现仍比普通选择器重，尤其当括号内是 :nth-child(n) 或深层后代时。避免在滚动频繁区域（如长列表）大量使用 :has(> *:nth-child(100)) 这类高开销组合。
容易被忽略的兼容性细节
:has() 在 Safari 15.4–16.3 中不支持括号内使用伪元素（如 :before）、伪类（如 :focus-within）或属性选择器（如 [data-loaded]）。Firefox 121+ 才完整支持这些。
更隐蔽的问题：
- Vue / React 的 SSR 渲染中，若服务端未启用
:has()支持（如旧版 Node.js + JSDOM），首屏可能漏样式 - CSS-in-JS 库（如 Emotion、Styled Components）对
:has()的解析支持不一，部分版本会因语法校验失败直接丢弃整条规则 - PostCSS 插件（如
postcss-preset-env）默认不 polyfill:has()，也无法安全降级 —— 它无法被编译成等效旧语法
上线前务必在目标设备真机上验证，别只信 CanIUse 的“支持”标记。
