相邻兄弟选择器（+）只匹配紧邻的下一个同级同父元素，如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 class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div>分隔块</div> <p>段落2</p>
h2 + p 只匹配第一个 p；h2 ~ p 会匹配两个 p。如果只想控制「标题正下方那个说明文字」，必须用 +；如果想统一设置标题后所有段落的间距，~ 更合适。
实际项目中容易被忽略的兼容性细节
+ 在 IE7+ 就完全支持，现代项目基本不用考虑兼容问题。但要注意它对伪元素无效——你不能写 p + ::before，因为 ::before 不是真实 DOM 元素，不参与兄弟关系计算。
另外，它无法跨 Shadow DOM 边界，如果目标元素在自定义组件的 shadow root 里，外部样式表里的 + 选择器不会穿透生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
