17370845950

相邻兄弟选择器（+）用于选中紧邻且同级的后一个元素，语法为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结构是否符合预期。

• 确保目标元素确实紧邻且同级，空格、换行、注释不影响DOM关系
• 动态插入内容时，新元素若未紧邻原元素，+不会生效，此时需配合JS或改用:has()（较新，兼容性有限）
• 避免过度嵌套使用，如div > p + ul + li，可读性和维护性会下降