通用兄弟选择器~匹配在A元素之后且同级的所有B元素；A与B须同父，~只向后查找不跨层级，区别于相邻兄弟选择器+，常见误用是混淆二者。
通用兄弟选择器 ~ 的基本用法
通用兄弟选择器 ~ 用于选中**在 DOM 中位于某元素之后、且与该元素同级（即共享同一个父元素）的所有兄弟元素**。它不关心中间隔了多少个其他兄弟，只要满足“同级 + 在后面”就匹配。
注意：它只往**后**找，不会匹配前面的兄弟；也不跨层级，子元素、父元素、祖辈元素都不算。
-
A ~ B匹配所有在A元素之后、与A同级的B元素 -
A和B必须有相同的父元素 -
A本身不会被选中，也不会影响样式
常见错误：和相邻兄弟选择器 + 混淆
很多人写成 A + B 却期望选中所有后面的 B，结果只命中第一个。这是最典型的误用。
+ 只匹配紧邻的下一个兄弟，~ 才是“后面所有”的正确工具。
立即学习“前端免费学习笔记（深入）”；
.trigger ~ .target {
color: red;
}
上面规则会让所有在 .trigger 后面的同级 .target 变红；而如果写成 .trigger + .target，只有紧跟其后的那一个生效。
实际使用场景与限制
典型用途包括：表单校验提示批量显示、导航菜单激活态联动、卡片列表中某项被标记后高亮后续同类项等。
- 不能用于“父容器内所有后代”，必须是严格同级
- 不支持伪类或复杂组合右侧（如
A ~ :nth-child(2)是合法的，但A ~ B:hover会匹配到B，不是A的 hover 状态） - 性能上无明显负担，现代浏览器优化良好，但大量嵌套使用时仍建议用 class 控制更可控
- IE7+ 支持，无需担心兼容性问题（除非还要支持 IE6）
为什么有时候没生效？检查这几点
写对了语法却看不到效果，大概率是结构或优先级问题。
- 确认
A和B真的是同级——打开开发者工具，看它们是否在 DOM 树中处于同一层<div>下 - 检查是否有更高优先级的样式覆盖（比如
!important、内联样式、ID 选择器） - 注意空格：写成
A~B（无空格）是无效的，必须是A ~ B - 若
B是动态插入的，确保插入位置确实在A后面且同级；React/Vue 中需注意 key 和渲染顺序
兄弟选择器依赖真实 DOM 顺序，不是渲染逻辑顺序，这点容易被忽略。
