:has(+ .sibling) 本质是反向过滤而非真正向前选择，即先选候选元素（如 .box），再筛选其后紧邻 .circle 的实例；它对空白节点、注释、插入的换行空格均敏感，链式 + 可选前第 n 个兄弟，但兼容性有限且需 JS 降级。
用 :has(+ .sibling) 选前置兄弟，本质是“反向过滤”
这不是真正意义上的“向前选择”，而是利用 :has() 的逻辑表达能力做条件筛选：先选所有候选元素（比如 .box），再用 :has(+ .circle) 筛出那些「后面紧跟着 .circle」的 .box —— 也就是 .circle 的前一个兄弟。
关键在于理解这个模式不是“从 .circle 往回找”，而是“从所有 .box 往前看它是否符合‘+ .circle’这个后续结构”。
-
.box:has(+ .circle)匹配的是.circle前面那个紧邻的.box，中间不能有其他元素 - 如果 DOM 中是
<div class="box"></div><div class="spacer"></div><div class="circle"></div>，该选择器完全不匹配 —— 因为.box后面跟的不是.circle，而是.spacer - 该写法对空白文本节点、HTML 注释同样敏感：
<div class="box"></div><!-- comment --><div class="circle"></div>也会失效
:has(+ .sibling) 在真实结构中容易失效的 3 种情况
即使语法写对，实际 HTML 结构稍有偏差就直接不生效。常见失效点：
- 父容器内存在隐藏元素（如
display: none或visibility: hidden的兄弟）不影响 DOM 位置，但若该元素真实存在于文档流中，仍会打断+关系 - 服务端渲染或框架（如 React/Vue）注入的注释节点（例如 SSR 的 hydration 注释、Vue 的 ）会成为真实兄弟节点，导致
+断开 - 使用
innerHTML动态插入内容时，若字符串含换行/缩进空格，可能生成文本节点（哪怕不可见），同样破坏相邻性
选前第 n 个兄弟：叠加 + 而非用 ~
想选 .circle 前第二个 .box？别用 .box ~ .circle，那只会匹配所有在 .circle 之前的 .box（无序、无距离控制）。正确方式是链式使用 +：
立即学习“前端免费学习笔记（深入）”；
.box:has(+ .box + .circle) { background: #dbeafe; }这个选择器含义是：“选一个 .box，它后面紧跟着另一个 .box，而那个 .box 后面又紧跟着 .circle”——即当前 .box 是 .circle 的前第二个兄弟。
- 前第三个：用
.box:has(+ .box + .box + .circle) - 不能用
*替代类名来“通配”，因为.box:has(+ * + .circle)在多数浏览器中不被支持（:has()内部对通配符限制严格） - 链越长，可读性和性能代价越高；超过前两个，建议改用 JS 控制或重构 DOM 结构
兼容性与降级方案必须明确评估
:has() 在 Chrome 105+、Firefox 121+、Safari 15.4+ 支持，但旧版 Edge、IE 全不支持，部分安卓 WebView 也未覆盖。生产环境不能默认启用。
- 若目标用户包含企业内网（仍用 IE11 或旧 Edge）、或需支持 Android 10 以下 WebView，
:has(+ .sibling)必须配合 JS 降级（例如用Element.nextElementSibling判断后加 class） - CSS 中无法用
@supports检测:has()是否支持+ .sibling这种嵌套组合，只能检测:has(*)—— 但该检测通过不代表:has(+ .x)就一定可用 - 最稳妥的兜底：把逻辑上需要“前置兄弟响应”的行为，改为由后置元素（如
.circle）通过~或+影响前面的兄弟容器（例如给父元素加 class），再用后代选择器控制
真正难的从来不是写出 :has(+ .x)，而是确认 DOM 中那两个节点之间——真的什么都没有。
