:has() 能实现“父选择器”效果是因为它支持基于子元素状态向上匹配祖先元素，虽不能选直接父级但可配合> *等达成子变父响应，且纯样式层、轻量声明式。
为什么 :has() 能当“父选择器”用
因为浏览器终于支持了 CSS 级别的向上匹配能力——:has() 允许你基于子元素是否存在、是否满足条件，来选中其祖先元素。它不是真正意义上的“父选择器”（不能只选直接父级），但绝大多数实际场景里，用 :has() 配合 > * 或直接写父容器选择器，就能达成“子变 → 父响应”的效果。
注意：它不改变 DOM 结构或触发重排，纯样式层响应，所以比 JS 监听 + class 切换更轻量，也更声明式。
:has() 的基本写法和常见踩坑
语法是 :has(子选择器)，必须写在父/祖先选择器后面；括号内不能写伪元素或某些伪类（如 :focus-within 在部分旧版 Safari 里不被允许嵌套）。
- ✅ 正确：
div:has(input:checked) { background: #e0f7fa; } - ❌ 错误：
div:has(:focus)（:focus是动态伪类，多数浏览器目前不支持在:has()内使用） - ⚠️ 注意兼容性：Chrome 105+、Firefox 121+、Safari 15.4+ 支持，但 Safari 15.4–16.3 对
:has()内部的复杂选择器（如+ .sibling）支持不稳定 - ⚠️ 性能提示：避免在
:has()里写过于宽泛的选择器，比如:has(*:hover)，可能触发频繁重计算
用 :has() 响应表单控件状态（最常用场景）
这是当前最稳定、最值得立刻用起来的场景：根据 input、select、textarea 的值或状态，高亮整个表单项容器。
立即学习“前端免费学习笔记（深入）”；
例如让带标签的输入框在有内容时整体加边框：
label:has(input:not(:placeholder-shown):valid) {
border: 2px solid #28a745;
padding: 8px;
}
关键点：
-
:not(:placeholder-shown)比:not(:empty)更可靠——input没有:empty伪类 - 如果用
required，可加:valid进一步过滤，避免空值误判 - 不要写
label:has(input[value!=""])——value是属性，不是实时 DOM 属性，不会随输入更新
替代 JS 的折叠面板展开态样式控制
不用 JS 切换 class，也能让标题栏在对应内容展开时变色：
.accordion-header:has(+ .accordion-content[open]) {
background-color: #bbdefb;
}
前提是 HTML 结构是相邻兄弟关系（.accordion-header 紧跟 .accordion-content[open]）：
- ✅ 支持
[open]属性，因为它是原生<details></details>的布尔属性，会被真实写入 DOM - ⚠️ 如果用自定义
data-open，得靠 JS 同步设置属性，否则:has([data-open="true"])不会响应 - ❌ 不能用于判断
display: none或height: 0这类纯 CSS 控制的隐藏状态——:has()只看 DOM 结构和属性，不看渲染结果
真正难的不是写法，而是想清楚哪些状态能被 CSS 原生捕获：属性变更、伪类切换、HTML 布尔属性（open、checked、disabled）可以；CSS 类名变化、尺寸变化、滚动位置不行。
