相邻兄弟选择器（+）用于选中同父级中紧接在某元素后的下一个兄弟元素，如h2 + p { color: blue; }仅对紧跟h2的首个p生效，适用于标题后首段加粗、表单布局等场景，与通用兄弟选择器（~）不同，+仅作用于相邻元素，需注意元素同级且顺序正确，兼容性良好。
相邻兄弟选择器在CSS中用于选中紧跟在另一个元素后的同级元素。它只作用于紧接的下一个兄弟元素，且两个元素必须拥有相同的父元素。这个选择器使用加号（+）表示，语法简洁却非常实用。
相邻兄弟选择器的基本语法
其基本结构如下：
前一个元素 + 后一个元素 { 样式声明 }只有当前面的元素和后面的元素是同一父级下的相邻兄弟时，样式才会生效。例如：
h2 + p { color: blue; }这段代码会让紧跟在 h2 元素后的第一个 p 元素文字变为蓝色。如果某个 p 前面不是 h2，或者中间隔了其他元素，样式就不会应用。
立即学习“前端免费学习笔记（深入）”；
实际应用场景举例
这种选择器特别适合用于文章排版、表单布局等需要“条件性样式”的场景。
- 文章中仅对第一个段落设置特殊样式：让标题后的首段文字加粗
- 表单中为带标签的输入框添加间距：label + input 可精准控制布局
- 折叠面板中控制展开内容的样式：点击触发的元素后紧跟的内容块可动态改变外观
示例代码：
margin-top: 10px;
color: #333;
}
只有当 .content 紧跟在 h3 后时，才会获得这些样式。
与普通兄弟选择器的区别
CSS还有一个通用兄弟选择器（~），它选择的是所有后续的同级元素，而不仅仅是紧邻的那个。
h2 ~ p { font-style: italic; }这会使 h2 后面所有的 p 元素变为斜体，不论中间是否隔着其他元素。而 + 只作用于下一个，更精确。
注意事项与兼容性
使用相邻兄弟选择器时需注意以下几点：
- 两个元素必须具有相同父节点，嵌套层级不同无效
- 顺序不能颠倒，前一个元素必须真实存在且紧挨着目标元素
- 支持所有现代浏览器，包括IE7及以上，兼容性良好
- 不可逆向操作，无法选择前面的元素
基本上就这些。掌握 + 选择器能让你在不增加类名或JavaScript的情况下，实现更智能的样式控制。
