:has() 是唯一标准化的父选择器方案，语义为“若内部满足条件则选中该元素”，需写在目标元素后如 .container:has(> .active)，支持组合条件与嵌套伪类，但受限于兼容性（chrome 105+等）、不支持复杂回溯及动态状态。
:has() 就是父选择器，但得注意它只支持“向上找一个层级”的限制，且目前不支持在 CSS 选择器开头直接写 :has()（比如不能写 :has(.child) .parent）。
为什么 :has() 能替代传统父选择器？
浏览器原生不支持 :parent 或 :contains() 这类向上匹配的伪类，而 :has() 是唯一被标准化并落地的方案。它的语义就是“如果某个元素内部满足条件，则选中该元素本身”。
关键点：
-
:has()必须写在目标父元素之后，作为其伪类，例如.container:has(> .active)—— 表示“有直系子元素带.active类的.container” - 它不改变文档流，也不触发重排，纯样式匹配
- 不支持复杂嵌套回溯，比如
:has(+ .sibling .deep .target)可能因浏览器实现差异失效
:has() 的常见写法与参数差异
写法看似简单，但子选择器的语法精度直接影响是否命中：
- 用
>明确限定子级关系：nav:has(> a.active)比nav:has(a.active)更安全（避免匹配深层嵌套的a） - 支持组合条件：
form:has(input:invalid, textarea:invalid)表示任一表单控件无效时高亮整个form - 可嵌套伪类：
li:has(a[href^="https://"]):has(a[target="_blank"])同时满足两个链接条件 - 不支持伪元素或某些动态状态（如
:focus-within在部分旧版 Safari 中会降级失败）
容易踩的坑：兼容性与性能边界
别在生产环境无脑替换所有“模拟父选择器”的 JS 方案 —— 看清限制再动手：
- Chrome 105+、Firefox 121+、Safari 15.4+ 支持；Edge 同 Chrome；IE 和旧版 Safari 完全不识别，会忽略整条规则
- 若选择器里含复杂计算（如
:has(*:nth-child(100))），可能触发引擎回溯，导致渲染卡顿 -
:has()无法用于@keyframes或@media内部，也不能写在style属性里（即不支持内联样式） - 和
:not()嵌套时要小心优先级，例如div:not(:has(p))是合法的，但div:has(:not(p))语义混乱，多数浏览器不支持
真正要用好 :has()，得把它当成“带条件的容器高亮工具”，而不是万能 DOM 遍历替代品。最稳的场景是：表单校验反馈、导航项激活态传播、卡片内容存在性样式切换——这些结构清晰、层级可控的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
