css 新增的 `:has()` 伪类允许基于后代、兄弟或后续兄弟元素的状态反向影响祖先或前置元素样式，从而在纯 css 中实现传统上需 javascript 完成的“跨结构响应式样式控制”，如点击/悬停远端元素时改变非嵌套目标的外观。
在 CSS 发展历程中，长期缺乏“父选择器”或“前驱兄弟选择器”一直是样式逻辑受限的核心痛点。直到 2022 年底 :has() 伪类被主流浏览器广泛支持（Chrome 105+、Firefox 103+、Safari 15.4+），这一局面才真正被打破。:has() 的强大之处在于它支持关系选择器作为参数，不仅可检测子元素（#a:has(> .btn)），更关键的是支持后续兄弟（~）和通用兄弟（+）关系，从而实现对 DOM 中“上游”元素的条件样式控制。
回到你的原始需求：当 #c 被悬停时，改变完全不相关、位于其上方且无嵌套关系的 #a 的背景色。传统写法 #c:hover #a 失效，是因为 #a 并非 #c 的后代；而 :root #a 也无效，因 :root 无法建立反向依赖路径。正确解法正是利用 :has() 的前置匹配能力：
#a:has(~ #c:hover) {
background-color: #ccc;
}该选择器含义为：选中 ID 为 a 的元素，前提是其后（任意层级后）存在一个 ID 为 c 的元素，且该元素当前处于 :hover 状态。
注意语法要点：
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“前端免费学习笔记（深入）”；
- :has() 必须作用于被样式化的目标元素（这里是 #a），而非触发源（#c）；
- ~ 表示“后续兄弟”关系（中间可隔任意其他元素），若 #c 紧邻 #a 后，则可用 +（相邻兄弟）；
- :has() 内部可嵌套完整选择器，例如 #a:has(~ .container > .trigger:hover)；
- 不支持在 :has() 中使用伪元素（如 ::before）或某些动态伪类（如 :target 在部分旧版本）。
兼容性方面，截至 2023 年底，:has() 已覆盖全球超 95% 的桌面用户（caniuse.com/css-has），移动端 iOS Safari 15.4+ 与 Android Chrome 均已支持。若需支持更老环境，建议采用渐进增强策略：基础样式用 CSS 实现，复杂交互降级为轻量 JS（如仅监听 mouseenter/leave 并切换 class）。
总结：:has() 并非万能——它不能替代事件监听或数据绑定，但足以消除大量“仅为样式联动而引入 JS”的冗余场景。合理运用 #a:has(~ #c:hover)、section:has(.error) 或 form:has(:invalid) 等模式，可显著提升静态样式的表达力与可维护性，同时兼顾无 JS 环境下的基本可用性。
