相邻兄弟选择器（+）用于选中紧邻且同级的后一个元素，语法为A + B；区别于~选择器，+仅匹配紧邻下一个，而~匹配后续所有同级元素；IE7+支持，需确保HTML结构符合紧邻同级要求。
当两个元素在HTML中是同级且紧挨着出现时，可以用CSS相邻兄弟选择器（+）精准控制后一个元素的样式，无需额外加类名或JS干预。
相邻兄弟选择器的基本写法
语法为 A + B，表示“紧跟在A元素后面、且与A同级的B元素”。注意两点：必须是**紧邻**、必须是**同级**。
-
h2 + p：选中紧跟在<h2></h2>后面的<p></p>，跳过中间有其他标签的情况 -
.item + .item：常用于列表项之间添加分隔线或间距 - 不匹配嵌套结构，比如
div + span不会选中div内部的span
常见实用场景
省去手动加class，让样式更语义化、更易维护。
-
段落首行缩进例外处理：标题后第一个段落不缩进
h2 + p { text-indent: 0; } -
表单控件间距统一：让
label后的input顶部留空label + input { margin-top: 0.5em; } -
导航菜单下划线分离：相邻菜单项之间加竖线
.nav-item + .nav-item::before { content: "|"; margin: 0 8px; color: #999; }
和一般兄弟选择器（~）的区别
+只匹配**紧邻的下一个**，~匹配**后面所有符合条件的同级元素**。
立即学习“前端免费学习笔记（深入）”；
-
h3 + p→ 只影响紧跟其后的那个<p></p> -
h3 ~ p→ 影响该<h3></h3>之后所有同级<p></p>（中间可隔其他标签） - 多数“相邻”需求用
+更精确，避免误伤
注意事项与兼容性
相邻兄弟选择器IE7+就已支持，现代项目可放心使用，但需注意HTML结构是否符合预期。
- 确保目标元素确实紧邻且同级，空格、换行、注释不影响DOM关系
- 动态插入内容时，新元素若未紧邻原元素，
+不会生效，此时需配合JS或改用:has()（较新，兼容性有限） - 避免过度嵌套使用，如
div > p + ul + li，可读性和维护性会下降
