相邻兄弟选择器（+）只匹配紧邻的下一个同级同父元素，如h2 + p仅选中紧跟其后的第一个p；不跨元素、不向前、不穿透Shadow DOM，且IE7+已完全支持。
相邻兄弟选择器 + 的基本用法
它只匹配**紧邻的下一个同级元素**，不是所有后续兄弟，也不是父元素下的任意子元素。比如 p + ul 只会选中紧跟在 p 后面、且与 p 处于同一父容器内的第一个 ul，中间插一个 div 或空格换行都不影响——但插了别的元素（哪怕只是 span）就断链了。
常见误用是以为它能“向后找所有”，其实它非常严格：必须是「直接后继」+「同层」+「同父」。
为什么 div + p 没生效？检查这三点
典型失效场景背后往往就几个硬性条件没满足：
- 目标
p和前一个div不在同一个父元素里（比如p被包进了另一个section） -
div后面隔着注释节点、文本节点（如换行缩进产生的空白）——CSS 选择器不忽略这些，只要 DOM 树上不是紧邻，就不匹配 - HTML 中顺序反了，写成了
p + div却期待选中div后面的p
+ 和 ~ 的关键区别在哪
+ 是「紧邻兄弟」，~ 是「通用兄弟」，后者只要求同父、在后面，不限定是否紧邻。
立即学习“前端免费学习笔记（深入）”；
例如这段 HTML：
<h2>标题</h2> <p>段落1</p> <div>分隔块</div> <p>段落2</p>
h2 + p 只匹配第一个 p；h2 ~ p 会匹配两个 p。如果只想控制「标题正下方那个说明文字」，必须用 +；如果想统一设置标题后所有段落的间距，~ 更合适。
实际项目中容易被忽略的兼容性细节
+ 在 IE7+ 就完全支持，现代项目基本不用考虑兼容问题。但要注意它对伪元素无效——你不能写 p + ::before，因为 ::before 不是真实 DOM 元素，不参与兄弟关系计算。
另外，它无法跨 Shadow DOM 边界，如果目标元素在自定义组件的 shadow root 里，外部样式表里的 + 选择器不会穿透生效。
