:has()并非真正选择父元素，而是为祖先元素添加存在性条件；它匹配的是自身（如div），前提是其内部存在指定后代（如.error），无法向上定位到父级节点。
:has() 不能真正“选择父元素”，它只是让某个祖先元素（比如 div、form）在满足子元素条件时被样式化——目标仍是那个祖先自身，不是它的上一级父节点。
为什么 :has() 常被说成“选父”，但实际不是
写 div:has(.error)，浏览器匹配的是 div 元素本身，前提是它内部有 .error 后代。它没有把选择器目标切换到 div 的父级 section 或 body 上。CSS 语法模型里不存在“反转 DOM 树向上定位”的能力，:has() 只是加了一个存在性前置条件。
-
:has()是“容器条件匹配”，不是“父级定位” - 所谓“父选择器”是开发者对效果的通俗叫法，容易误解为能拿到上级节点
- 如果你需要影响
div的父级，必须把样式规则写在那个父级的选择器上，比如section:has(div .error)
:has() 在表单验证中怎么用才不翻车
典型需求：整个 form 在任意 input:invalid 时加红边框。这看似简单，但结构和浏览器支持稍有偏差就失效。
- 必须确保
input确实是form的后代（哪怕嵌套多层），不能靠for属性关联 - 写法要明确：
form:has(input:invalid)✅，form:has(> input:invalid)❌（除非你 100% 控制 HTML 结构，否则>容易因中间插入span或注释而断链） - Firefox 121+ 才默认启用，旧版需手动开
layout.css.has-selector.enabled；Safari 15.4+ 支持，但 iOS Safari 15.4–16.3 有渲染延迟 bug - 不要混用动态伪类：
form:has(input:focus)在快速切换焦点时可能不及时更新，建议改用:focus-within降级兜底
写 :has() 时括号里最容易错的三件事
语法看着简单，但 DevTools 不报错、样式却不生效，大概率栽在这几个细节上。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 括号内不能出现伪元素：
div:has(::before)直接被忽略，连警告都没有 - 不要嵌套
:has()：section:has(:has(h2))所有浏览器都不认，得拆成section:has(h2):has(p) - 空格不是可有可无：
:has(.error)在部分构建工具（如旧版 PostCSS 插件）里会被误删，推荐统一写成:has( .error)（括号后、点号前一个空格）
移动端和 SSR 场景下要注意什么
:has() 在服务端渲染或首屏直出时，如果子元素是 JS 动态插入的，初始 HTML 里没有匹配项，样式就不会触发——它只看当前 DOM 快照，不监听变化。
- SSR 模板中若依赖
:has( .loading)控制骨架屏，得确保.loading在 HTML 字符串里已存在 - 移动端重绘成本高，避免
:has(> *:nth-child(5n))这类深度遍历写法，会明显卡顿 - 可访问性不受影响，但它不触发任何事件，想配合语音朗读状态变化，还得补 JS
最常被忽略的一点：它不解决“结构不可控”的问题。比如第三方组件库的 HTML 结构你改不了，又没给外层容器加 class，那 :has() 再好也无从下手——这时候老实用 JS + MutationObserver 更实在。
