:has() 无法选择前兄弟元素，因其仅支持向下查找；唯一可行的是前兄弟:has(+ 后兄弟条件)，要求二者HTML紧邻且无间隔。

为什么不能直接用 :has() 选前兄弟元素

:has() 是 CSS 中唯一支持“后代/子元素反向影响父级或兄弟”的关系选择器，但它只允许向 DOM 树**下游**查找（即匹配当前元素的后代、子元素、甚至相邻兄弟），不支持向上查找父元素，也不支持向前查找前面的兄弟元素。所以像 .b:has(+ .a) 或 :has(~ .a) .a 这类试图定位前兄弟的写法，浏览器会直接忽略——这不是语法错误，而是规范明确禁止的。

:has() 能实现的“伪前兄弟”效果有哪些

虽然不能真选前一个兄弟，但可以换思路：把触发条件放在后兄弟上，用 :has() 改变它前面那个兄弟的样式。关键在于目标元素必须是 :has() 所在选择器的前序兄弟，且中间不能隔开。

• .a + .b:has(input:checked) → 无效：想改 .a，但 .a 不在选择器里
• .a:has(+ .b input:checked) → 有效：前提是 .a 和 .b 紧邻，且 .b 内有 input:checked；此时 .a 会被选中
• .a ~ .b:has(input:checked) → 只能选中 .b，无法回溯到 .a

真正可用的模式只有：前兄弟:has(紧邻后兄弟 符合条件)，例如：

.switch-label:has(+ .switch-input:checked) {
  background: #007bff;
}

这里 .switch-label 必须紧挨在 .switch-input 前面（HTML 中顺序为 ...），才能生效。

实际能用的 HTML 结构和常见翻车点

这个技巧极度依赖 DOM 顺序和层级。一旦结构稍有偏差，就完全失效。以下结构可行：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<label class="switch-label">开关</label>
<input class="switch-input" type="checkbox">

以下结构全部失效：

• 标签和 input 中间有空格、换行或注释（CSS 认为不是“紧邻”）
• 用了
  包裹其中一方，破坏了兄弟关系
• 想跨多层选“前第 N 个兄弟”，比如 .a:has(+ .b + .c input:checked) —— :has() 里的 + 只作用于其直接右侧元素，无法链式跳转
• 用 Flex/Grid 改变视觉顺序（如 order: -1）—— :has() 只看 HTML 源顺序，不看渲染顺序

替代方案：什么时候该放弃 :has() 改用 JS

如果需要响应更复杂的前兄弟状态（比如前 3 个兄弟中有任意一个 hover、或前兄弟含特定 class）、或者 HTML 结构无法调整为紧邻兄弟，:has() 就无能为力了。这时不如直接用 JS 监听事件并切换 class：

const input = document.querySelector('.switch-input');
const label = input.previousElementSibling;
input.addEventListener('change', () => {
  label.classList.toggle('active', input.checked);
});

这种写法稳定、可读、兼容性好，而且不受 HTML 排列约束。别为了硬套 :has() 把结构改得难以维护。

真正容易被忽略的是：哪怕 :has() 语法合法，只要 DOM 关系不满足“前兄弟 → 紧邻后兄弟 → 条件元素”的三级刚性链条，它就静默失败——连 DevTools 都不会报错，只会样式不出现。