相邻兄弟选择器（+）用于选中紧邻且同级的后一个元素，语法为A + B；区别于~选择器，+仅匹配紧邻下一个，而~匹配后续所有同级元素；IE7+支持，需确保html结构符合紧邻同级要求。
当两个元素在HTML中是同级且紧挨着出现时，可以用css相邻兄弟选择器（+）精准控制后一个元素的样式，无需额外加类名或js干预。
相邻兄弟选择器的基本写法
语法为 A + B，表示“紧跟在A元素后面、且与A同级的B元素”。注意两点：必须是**紧邻**、必须是**同级**。
-
h2 + 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→ 只影响紧跟其后的那个 -
h3 ~ p→ 影响该（中间可隔其他标签） - 多数“相邻”需求用
+更精确，避免误伤
注意事项与兼容性
相邻兄弟选择器IE7+就已支持，现代项目可放心使用，但需注意HTML结构是否符合预期。