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 状态。
注意语法要点：
