:has()匹配的是其前面的选择器所指的父元素，括号内仅为存在性检测条件，不参与样式应用，且仅支持能稳定映射dom状态的伪类和属性。
为什么:has()能直接匹配父元素而不是子元素
:has() 的作用对象永远是它前面那个选择器所指的元素，不是括号里的子元素。写 .card:has(.delete-btn)，生效的是 .card 这个容器本身；括号里只是“判断条件”，不参与样式应用。这点常被误解为“给子元素加样式”，实际完全相反。
它本质上是存在性检测：只要 DOM 树中存在满足括号内条件的后代（或指定关系）节点，父选择器就匹配成功。所以它不监听变化、不触发重排、也不提供事件——只是 CSS 引擎在渲染时做的一次静态检查。
- ✅ 正确理解：
label:has(input:checked)→ 给label加样式，当它内部有已勾选的input - ❌ 错误操作：
label:has(input:checked) input→ 这和:has()无关，只是普通后代选择器 - ⚠️ 注意：括号内不能用伪元素（如
::before），因为它们不生成真实 DOM 节点
:has()里哪些子状态真正可用、哪些会静默失效
浏览器只认“能稳定映射到 DOM 状态”的条件。:hover、:focus 在部分 Safari 版本中支持不稳定，:empty 在 :has() 内永远不匹配（因为 :has() 自身存在已让父元素“非空”），而 :checked、:invalid、[data-loaded="true"] 这类则非常可靠。
- ✅ 安全组合：
form:has(input:invalid)、details:has([open])、article:has(.comment.error) - ❌ 明确禁用：
div:has(::before)（语法错误）、section:has(div:hover)（Safari 中大概率不触发） - ⚠️ 表面合法但风险高：
.container:has(.item:nth-child(3))—— Chrome 支持，但 Safari 15.4–16.3 对:nth-child()在:has()中支持不一致
为什么写了:has()却没反应？常见静默失败原因
大多数时候不是语法错，而是浏览器压根没解析这条规则，或条件根本没满足。DevTools 的 Styles 面板里如果根本看不到该规则，基本可判定为兼容性问题。
- 浏览器不支持：
CSS.supports('selector(:has(*))')返回false，说明当前环境（如旧版 Safari、Electron 内核）忽略整个:has()规则 - attribute 没正确设置：JS 只改了
el.dataset.status = "error"，但:has([data-status="error"])只读 DOM attribute，必须用el.setAttribute('data-status', 'error') - 父选择器被覆盖：
.parent { height: auto !important; }会挡住.parent:has(.child) { height: 100px; } - Shadow DOM 隔离：
:has()默认无法跨 shadow boundary 匹配，需透传 class 到 light DOM 或用::slotted()
性能与使用边界：别在哪用 :has()
:has() 是关系型选择器，浏览器需对每个候选父元素向上/向下遍历 DOM 树。嵌套过深、匹配目标过多，或用于滚动/动画区域，会明显拖慢渲染。
- ✅ 合理场景：表单校验提示（
form:has(input:invalid)）、菜单展开态（nav:has(.submenu[open])）、卡片状态反馈（.card:has(.loading)） - ❌ 避免场景：body/html 上全局使用、配合
@keyframes或@media、深层嵌套（>3 层祖先链）、大量动态插入内容的列表项 - ⚠️ 注意：不能写
:not(:has(...))，也不能嵌套:has(:has(...))，这些语法无效
innerHTML 或 appendChild 新增的子元素，其状态变化能即时触发 :has()，但若父元素本身是 JS 动态创建且尚未插入 DOM，那条 :has() 规则就不会生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
