CSS选择器不能选中前面的兄弟元素，因规范禁止反向遍历DOM树；~和+仅匹配后续同级元素，:has()可绕过限制但须写在目标元素上，:not(X ~ Y)能间接筛选前置兄弟。
为什么 ~ 和 + 都不能选中前面的兄弟元素
CSS 选择器从设计之初就禁止反向遍历 DOM 树，~（通用兄弟）和 +（相邻兄弟）都只匹配“当前元素之后”的同级节点。这不是浏览器实现差异，而是规范强制要求——因为样式计算必须是单向、可预测、高性能的。一旦允许“往前找”，浏览器就得为每个元素反复回溯父节点、检查所有前置兄弟，严重破坏渲染流水线。
:has() 不是父选择器，但能绕过方向限制
:has() 的作用对象是“被影响的容器”，不是触发条件的元素。想让某个 .header 在它后面出现 .cell.open 时变色，得写成：.header:has(~ .cell.open)。关键点：
-
:has()必须写在目标元素上，不能写在.cell.open上 -
:has(~ .cell.open)和:has(.cell.open)完全不同：前者要求.cell.open是它的后续兄弟，后者只要子元素里有就行 - Chrome 105+、Firefox 121+、Safari 15.4+ 支持，但 Safari 15.3 及更早版本不支持
常见失效原因：DOM 结构比选择器更关键
调试时发现 input:checked ~ .panel 不生效，90% 的情况不是语法错，而是结构问题：
-
.panel其实被包在另一个div里——它不是input的兄弟，是“侄子” - 中间存在
display: none的兄弟节点，它会被完全排除在兄弟关系之外 - HTML 中两个元素之间有换行或空格生成的
#text节点，+会失效，~不受影响，但很多人误以为两者等价
真要选“前面的兄弟”，别硬刚选择器
用 :not(X ~ Y) 可以间接筛选出某元素之前的同级兄弟，例如：.content > .item:not(.divider ~ .item) 表示“所有不在 .divider 后面的 .item”。但它依赖 .divider 存在且可唯一识别；若分隔符无固定 class，就得退回到 JS —— 先 querySelector 找到锚点，再用 previousElementSibling 循环收集。纯 CSS 没有银弹，DOM 层级和语义清晰度，永远比技巧更重要。
立即学习“前端免费学习笔记（深入）”；
