:has()选择器用于父容器匹配内部存在特定子元素的场景，但仅safari 15.4+支持，需用@supports检测；不支持伪元素/伪类、无法polyfill，且依赖真实dom节点存在而非响应式状态。
Chrome/Firefox里用:has()选中父容器，但Safari 15.4+才支持
想让某个容器在内部有.child-class时才生效样式？直接写.container:has(.child-class)就行，但得先确认浏览器是否撑得住。Safari直到15.4才加入:has()支持，旧版会完全忽略这条规则——不是失效，是压根不解析。
常见错误现象：:has()写进CSS后样式没反应，查了半天发现是本地Safari版本太老；或者CI环境跑视觉回归测试时，Safari截图里该高亮的容器一片空白。
- 使用前务必检查
navigator.userAgent或用@supports selector(:has(*))做特性检测 - 不能用于
@keyframes或transition动画属性中 - 嵌套层级越深，性能开销越大，尤其在滚动区域频繁重排时，
:has(.deep .nested .target)比:has(.target)慢明显
:has()不支持伪元素和伪类组合，比如:has(::before)或:has(:hover)
CSS规范明确禁止在:has()括号里用伪元素（::before、::after）或动态伪类（:hover、:focus），浏览器遇到会整个丢弃该选择器。
典型误用场景：想“当子元素被悬停时给父容器加边框”，于是写.card:has(.trigger:hover)——这行不通。浏览器不会报错，但这条规则直接失效，且控制台也不会提示。
- 替代方案：用JS监听
mouseenter/mouseleave，切换父容器的.has-hover类 - 如果只是校验是否存在某类元素，
:has(.icon)、:has([data-required])这类静态匹配完全OK - 属性选择器可用，比如
:has([aria-expanded="true"])是合法的
Vue/React里用:has()要小心动态DOM插入时机
组件首次渲染时.child-class可能还没挂载，或者异步加载内容后才出现，这时:has()不会自动“补触发”。它只响应DOM树结构变化，不监听属性变更或文本更新。
比如Vue里v-if="showChild"控制子元素显隐，切换瞬间父容器样式可能滞后一帧，甚至卡住不动——因为:has()依赖的是DOM节点存在性，不是响应式状态。
- 确保子元素真实插入DOM后再期待
:has()生效，别依赖v-show（它只是display: none） - React中用
useEffect配合ref手动触发重排，比如ref.current?.offsetHeight可强制浏览器重新计算 - 服务端渲染（SSR）时，若子元素初始不渲染，
:has()在首屏永远不匹配，必须搭配客户端hydrate逻辑
用@supports降级时，别把:has()和:is()混为一谈
有人看到@supports selector(:has(*))就顺手改成@supports selector(:is(*))做兜底，这是错的。:is()是匹配自身，:has()是向上找祖先，语义完全不同，降级逻辑不能偷懒复用。
比如目标是“有.error子项的表单标红”，form:has(.error) { border-color: red; }的合理降级不是form:is(.error)（根本不存在这种form），而是提前加个form.has-error类由JS维护。
- 真要CSS-only降级，只能靠属性标记：
form[data-has-error]，再用JS同步状态 -
:has()无法polyfill，任何试图用MutationObserver模拟它的方案都会在复杂交互中漏事件或抖动 - 目前最稳的路径：关键路径用JS打标，非关键路径用
:has()提效，别指望它覆盖全部场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
