:has()选择器允许父元素根据子元素状态改变样式，例如div:has(img)可使包含img的div改变背景色，.container:has(.child:hover)能在子元素悬停时改变父容器样式，.form-group:has(input:focus)可实现输入框聚焦时高亮字段组，该选择器在现代浏览器中已支持，建议在非核心功能中使用以提升开发效率。
在CSS中，父元素通常无法直接感知子元素的状态（比如 hover、focus 或 class 变化），从而改变自身的样式。这是由于CSS选择器只能“向下”匹配子元素，不能“向上”影响父级。但现代CSS提供了 :has() 选择器，让我们可以实现“父元素根据子元素状态改变样式”的需求。
什么是 :has() 选择器？
:has() 是一个关系伪类，用于选择“包含某个特定子元素或满足某种条件的子元素”的父元素。它让CSS具备了“向前”或“向上”选择的能力，虽然它本身不是真正意义上的“反向继承”，但在逻辑上实现了父子关系的反向控制。
例如，你想让一个 div 在它内部有 img 元素时改变背景色，就可以这样写：
div:has(img) {background-color: #f0f0f0;
}
用 :has() 实现父元素响应子元素状态
实际开发中，常见需求是：当鼠标悬停在子元素上时，父元素做出反应。过去这需要JavaScript，现在用 :has() 就能轻松实现。
立即学习“前端免费学习笔记（深入）”；
示例：子元素 hover 时，父容器变色
.container:has(.child:hover) {background-color: lightblue;
transition: background 0.3s;
}
此时，只要 .child 被悬停，.container 就会应用对应样式。无需JS，结构清晰。
另一个典型场景：表单中某个输入框获得焦点时，高亮整个字段组
.form-group:has(input:focus) {border-left: 4px solid #007acc;
padding-left: 8px;
}
这样用户体验更直观，视觉反馈更明确。
浏览器兼容性与使用建议
:has() 目前在主流现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）中已支持，但不支持旧版本。使用时建议：
- 在关键功能中配合JavaScript降级处理
- 在非核心交互中大胆使用，提升开发效率
- 书写时注意选择器性能，避免深层嵌套的 :has()
语法提示：:has() 支持复合选择器，如 :has(.a:hover, .b:focus) 表示满足任一条件即可触发。
基本上就这些。:has() 的出现填补了CSS选择器的一大空白，让开发者能更自然地处理父子关系逻辑。虽然它不能完全替代JavaScript，但在样式层面极大增强了表达能力。合理使用，能让代码更简洁、语义更清晰。
