:has()只匹配并作用于父/祖先元素本身，不能直接修改其内部子元素样式；它必须紧接在目标父选择器后，不可前置、嵌套或与:hover等伪类连用，括号内仅支持静态可映射DOM节点的选择器。
:has() 不能直接修改容器“内部”子元素的样式，它只匹配并作用于父/祖先元素本身。 想靠 :has() 给子元素加样式，是常见误解——它不参与后续选择链，只决定“谁被选中”。真要改子元素，得靠结构配合或换思路。
为什么 :has() 写在前面就失效？
浏览器解析时，:has() 必须紧接在目标父选择器之后，不能前置、不能嵌套、不能和伪类连写（比如 :hover:has()）。以下全是无效写法：
-
:has(.child) .parent→ 语法错误，:has()不在开头不被识别 -
.parent:hover:has(.child)→:hover和:has()不能链式共存 -
.parent:has(.child) .child→ 这条规则里.child的样式和:has()无关，只是普通后代选择器；若想仅在条件满足时才生效，必须把整个规则逻辑收束到父级上（比如用display控制子元素显隐）
:has() 能安全写的内部条件有哪些？
括号里只能放能真实映射 DOM 节点状态的选择器。不是所有伪类都可用，且部分组合在 Safari 15.4–16.3 中会静默失败：
- ✅ 可用：
input:checked、:valid、:invalid、[data-status="error"]、button:disabled、img[src] - ❌ 禁用：
:hover、:focus、:focus-within、::before、::after（伪元素无真实节点） - ⚠️ 表面合法但危险：
:empty在:has()中恒不匹配；:nth-child(2)单独可用，但:has(:nth-child(2))不被支持
想“改子元素”，实际该怎么写？
真正可行的方式是：把样式控制权交给父级，用父级状态驱动子元素表现。例如让 .card 有 .badge 时，只显示第一个 .content：
立即学习“前端免费学习笔记（深入）”；
.card:has(.badge) .content:not(:first-child) {
display: none;
}
.card:has(.badge) .content:first-child {
display: block;
}
关键点：
- 所有子元素样式都通过父级是否匹配
:has()来统一开关 - 避免用
:has()去“探测”动态伪类（如:hover），它不响应实时交互态 - 如果结构是分离式（
<input id="a"><label for="a"></label>），:has()失效——它只认 DOM 树中的包裹关系，不认for/id关联
最易被忽略的是性能代价：浏览器需对每个候选父元素遍历全部后代来判断 :has() 条件。写成 body:has(.error) 或嵌套 :has(*:nth-child(odd))，可能引发明显卡顿。实际项目中，优先限定父选择器范围（比如用具体 class 替代 div），并避开通配符+伪类组合。
