:has() 是 CSS 原生关系伪类，能基于子/兄弟元素状态反向匹配并样式化祖先元素（如 div:has(.error) 选中含 .error 的 div），实现“父级条件样式”，但并非真正选择 DOM 父节点；它不支持嵌套、伪元素及部分动态伪类，Chrome 105+/Firefox 121+/Safari 15.4+ 支持，性能开销较大，适用于表单验证等低频响应场景。
什么是 :has() 伪类，它真能选父元素吗？
:has() 是 CSS 原生支持的“关系选择器”，它让浏览器能基于子元素（或兄弟元素）的状态反向影响祖先/前面的元素——这确实是 CSS 历史上第一次允许“从下往上”条件匹配。但它不能真正选择父元素本身，而是让父元素成为被样式作用的目标，前提是其内部满足 :has() 的条件。
比如 div:has(> .error) 匹配的是那个 div 元素（即“父级”容器），不是它的子元素；但这个 div 必须直接包含一个 .error 子节点。所以它实现的是“父级条件样式”，不是 DOM 树上的父选择器。
:has() 的基本写法和常见错误
语法是 selector:has(相对选择器)，括号内必须是合法的 CSS 选择器片段，且不能包含伪元素（如 ::before）或某些伪类（如 :has() 自身）。
- ✅ 正确：
ul:has(li.active)——ul有任意li.active就生效 - ✅ 正确：
form:has(input:invalid)—— 表单内任一输入框校验失败就高亮整个表单 - ❌ 错误：
div:has(.child)::before—— 伪元素不能出现在:has()内部 - ❌ 错误：
section:has(:has(p))——:has()不支持嵌套 - ⚠️ 注意：
article:has(> h2:first-child)中的>和:first-child都有效，但组合后可能因 HTML 结构微小变化而失效（比如多了一个注释节点）
实际能用的典型场景和性能提醒
:has() 最实用的地方是表单状态反馈、列表项条件样式、卡片内容驱动外观等无需 JS 的响应式布局控制。但它不是免费的：浏览器需对每个候选元素执行子树遍历，复杂选择器会明显拖慢渲染。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐用于低频更新区域，如用户提交前的表单整体边框变色：
form:has(input:invalid) { border-color: #e53e3e; } - ✅ 可配合
:focus-within做增强，比如只在聚焦且含错误时才显示提示：form:focus-within:has(input:invalid) .error-summary { opacity: 1; } - ⚠️ 避免深层嵌套匹配：
nav:has(ul:has(li:has(a[href^='https://'])))这类写法既难维护，也容易触发重排瓶颈 - ⚠️ Safari 15.4+、Chrome 105+、Firefox 121+ 支持，旧版 Edge（非 Chromium）和 IE 完全不支持，
@supports检测建议加上：@supports selector(:has(*)) { ... }
替代方案对比：什么时候不该用 :has()？
如果目标是动态切换状态、需要事件响应、或兼容性要求覆盖到 iOS 15.3 或 Android Chrome :has() 是声明式、被动的，它不会触发重绘以外的逻辑。
- 需要“点击后展开详情并高亮标题”？
:has()无法监听 click，得用 JS 切换 class - 要根据子元素数量做不同栅格布局（如 1 个子项占满，3 个子项均分）？
:has()不支持计数，得靠:nth-child组合或 JS - 服务端渲染页面中，初始 HTML 已含
.error类，但 JS 后续清除了它？:has()会实时响应 DOM 变化，这点比纯 class 切换更“自动”，但也意味着你得确保 JS 不意外破坏结构
真正容易被忽略的点是：它依赖精确的 DOM 层级关系。加了个 <span></span> 包裹、或者用了 Shadow DOM，:has() 就完全失效——这时候别硬调选择器，先确认结构是否可控。
