css 在 2023 年已原生支持 `:has()` 伪类，允许基于后代、兄弟或后续兄弟元素的状态（如 `:hover`）反向影响**前置的、非嵌套的任意元素**，无需 javascript 即可实现跨层级样式联动。
在传统 CSS 中，选择器只能“向下”或“向右”匹配（即子元素、后代、相邻/通用兄弟），无法从一个元素“回溯”影响其前面或完全无关位置的元素——这正是你示例中 #c:hover #a 失败的根本原因：#a 不是 #c 的后代，也不在其兄弟链的左侧可及范围内。
而 CSS :has() 伪类（CSS Selectors Level 4 标准）彻底改变了这一限制。它是一个关系型选择器，语法为 E:has(F)，表示“匹配满足条件 E，且在其 DOM 子树中（含后代、兄弟等上下文）存在匹配 F 的元素”。关键在于：E 可以是任意已有元素（如 #a），而 F 描述的是相对于 E 的某种结构关系——包括 ~（后续兄弟）、+（紧邻后续兄弟）甚至嵌套路径。
回到你的原始需求：
other stuff
你想在 #c:hover 时修改 #a 的样式。正确写法是：
立即学习“前端免费学习笔记（深入）”；
#a:has(~ #c:hover) {
background-color: #ccc;
}✅ 解析：
- #a 是目标元素；
- :has(~ #c:hover) 表示“#a 后面（不一定是紧邻）存在一个处于 :hover 状态的 #c 元素”；
- ~ 是通用兄弟选择器，允许中间有其他元素（如你示例中的 other stuff和嵌套容器），只要 #c 出现在 #a 之后的文档流中即可。
⚠️ 注意事项：
- :has() 不支持在 @keyframes 或 @media 内部使用，且不能用于 :is() / :where() 等函数内部作为参数（部分浏览器暂不支持嵌套 :has）；
- 当前（2024 年中）主流浏览器均已支持：Chrome 105+、Firefox 121+、Safari 15.4+、Edge 105+（caniuse.com/css-has）；
- :has() 是纯 CSS 解决方案，无 JS 依赖，完美适配禁用 JavaScript 的安全场景；
- 避免过度嵌套 :has()（如 :has(:has(...))），可能影响性能与可维护性；
- 不要误写为 #c:hover:has(#a) —— 这表示“当 #c 悬停时，检查 #c 内部是否存在 #a”，语义完全错误。
? 进阶技巧：
若 #c 位于深层嵌套中（如
#a:has(~ section article #c:hover) {
outline: 2px solid gold;
}总结：:has() 是现代 CSS 最具革命性的新增能力之一，它让“状态驱动的跨节点样式”成为现实。对于你提出的“从 #c 控制 #a”这类典型 UI 需求（如悬停显示远端提示、联动表单验证、折叠菜单高亮对应导航项等），#a:has(~ #c:hover) 就是简洁、标准、高性能的纯 CSS 答案。
