~选择器无法匹配前面的兄弟元素，因为css规范禁止反向遍历dom树，它只匹配当前元素之后、同级且同父的后续兄弟节点，不支持逆序选择。
为什么 ~ 选择器无法匹配前面的兄弟元素
因为 CSS 规范从设计上就禁止任何反向遍历 DOM 树的行为。~ 和 + 都只处理“当前元素之后”的同级节点，这不是浏览器兼容问题，而是所有现代引擎都必须遵守的渲染约束。
~ 的匹配逻辑完全依赖 DOM 文档流顺序
它只看 HTML 中元素出现的先后位置和层级关系，不关心 CSS 规则写在哪儿。哪怕你在样式表最底部写了 input ~ .hint，如果 .hint 出现在 input 前面，这条规则就彻底失效。
-
input和.hint必须是同一父元素的直接子节点 -
input的标签必须在 HTML 源码中物理位于.hint之前 - 中间插入一个
display: none的兄弟节点？它会被完全忽略，不影响~匹配 - 但如果是
display: contents容器里的子元素，它们不构成真实兄弟关系，~失效
想影响前面的兄弟？别指望 ~，换思路
纯 CSS 没有“选前一个兄弟”的原生能力。常见应对方式有：
- 用
:not(X ~ Y)间接筛选：比如.item:not(.divider ~ .item)表示“所有不在.divider后面的.item”，但它要求.divider存在且可稳定识别 - 把状态提到父级：JS 给父容器加
class="has-error"，再写.has-error .hint - 用属性控制：
[data-status="error"] .hint，JS 只需切换data-status属性值 - 真要动态定位锚点前的兄弟，得用 JS：
el.previousElementSibling或循环遍历el.parentNode.children
:has() 看似能绕过，但实际不是“向上选”
:has() 的作用对象永远是它挂载的那个元素，不是条件里的目标。写成 .header:has(~ .cell.open)，意思是“找那些后面跟着 .cell.open 的 .header”，.header 还是得在 DOM 里出现在 .cell.open 前面——它没突破方向限制，只是把判断逻辑倒了过来。
真正容易被忽略的是：DOM 结构是否干净、语义是否清晰，远比琢磨怎么让选择器“逆天改命”重要。一旦结构松散（比如提示被渲染到 body 底下），~ 就彻底退出战场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
