:has()不能直接写成div:has(p)就完事，因其仅在chrome 105+、safari 15.4+、firefox 121+中稳定支持，且必须位于选择器最外层、不支持伪元素和动态伪类嵌套，参数需为真实存在的后代或兄弟节点，同时存在性能开销与兼容性风险。
:has() 确实能模拟“父选择器”，但它不是真正意义上的父选择器——它只在支持它的浏览器中生效，且必须用在**选择器的最外层**（不能嵌套在其他伪类里），也不能用于 CSS 动画或 transition 的触发条件。
为什么 :has() 不能直接写成 div:has(p) { ... } 就完事？
表面上看这句语法没错，但实际使用中容易忽略三件事：
-
:has()是一个「关系型」伪类，它的参数（比如p）必须是**相对当前元素的后代或兄弟关系**，且不支持伪元素、:hover等动态伪类作为参数（Chrome 125+ 开始部分支持:hover，但 Safari 仍不支持） - 它不匹配“空状态”：如果
div里有p，但该p被display: none或visibility: hidden隐藏，:has(p)依然匹配（因为 DOM 存在，只是不可见） - 性能敏感：浏览器需对每个候选元素执行子树遍历，大量使用
:has()可能触发强制同步布局（尤其是在滚动中）
怎么安全地用 :has() 控制父容器样式？
典型场景是表单验证、卡片状态切换、导航高亮等。关键在于限定范围和避免过度嵌套：
- 优先用具体标签 + 类名组合，比如
.card:has(.card__content > .error)，而不是泛泛的div:has(.error) - 避免链式
:has()，如section:has(div:has(p))—— 目前所有浏览器都不支持嵌套:has() - 若需响应“无内容”状态，用
:has(:empty)或:has(*:not(:empty))，但注意:empty会忽略空白符， - 想根据子元素是否聚焦来变色？可用
input:has(:focus)，但更推荐用:focus-within（兼容性更好，且语义更准）
:has() 在真实项目中的替代陷阱
很多人试图用它绕过 JS 控制 class，结果掉进兼容性和可维护性坑里：
- Safari 15.4+ 才开始支持，iOS 15.4 对应的 Safari 版本也得手动开启实验性功能（
about:config里没开关，只能等系统更新） - Webpack/Vite 构建时，CSS 压缩工具（如 cssnano）默认会删掉不认识的伪类，需显式配置
cssnano: { preset: ['default', { discardUnused: false }] } - 当需要“子元素满足多个条件”时，别写
:has(p, span)（这是“或”逻辑），而要写:has(p):has(span)（这是“且”逻辑） - 服务端渲染（SSR）场景下，
:has()不会在 HTML 输出阶段生效，所以首屏样式可能和客户端不一致
真正难的不是写对那行 CSS，而是判断什么时候该用它、什么时候该退回到 JS + class 切换——尤其当目标用户里还有不少 macOS Monterey 或旧 iPad 用户时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
