: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 中顺序为 <label>...</label><input type="checkbox">），才能生效。
立即学习“前端免费学习笔记（深入）”；
实际能用的 HTML 结构和常见翻车点
这个技巧极度依赖 DOM 顺序和层级。一旦结构稍有偏差，就完全失效。以下结构可行：
<label class="switch-label">开关</label> <input class="switch-input" type="checkbox">
以下结构全部失效：
- 标签和 input 中间有空格、换行或注释（CSS 认为不是“紧邻”）
- 用了
<div> 包裹其中一方，破坏了兄弟关系 <li>想跨多层选“前第 N 个兄弟”，比如 <code>.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 都不会报错，只会样式不出现。
