相邻兄弟选择器（+）用于精准匹配紧接在某元素后且同级的下一个兄弟元素，语法为A + B，要求A与B同父、无间隔；不支持前兄弟、跨层级或中间含注释节点，可结合伪类增强功能。
直接用 + 相邻兄弟选择器 就能精准匹配紧挨着的下一个兄弟元素，无需 JavaScript 或额外 HTML 结构。
什么是相邻兄弟选择器（+）
它只作用于**紧跟在某个元素后面、且同级（同一父元素下）的下一个兄弟元素**。语法是：A + B，表示“选中紧接在 A 后面的 B 元素”，A 和 B 必须有相同父级，且中间不能隔其他元素。
-
h2 + p→ 选中每个紧接在<h2></h2>后面的<p></p> -
.btn + .tooltip→ 只匹配类为tooltip且**正前方紧挨着**类为btn的元素 - 不匹配
.btn后面第二个、第三个兄弟，也不匹配嵌套在子元素里的目标
常见误用与注意事项
很多人写错位置或忽略结构限制，导致样式不生效：
- 写成
A + B + C想连续控制多个？不行 ——+是二元操作符，只能链式写成A + B, B + C - A 和 B 不在同一层级？比如 B 在 A 的子容器里 ——
+失效，需改用其他方式（如类名标记或 JS） - 中间有注释、空格文本节点？现代浏览器通常忽略纯空白文本节点，但注释节点会中断相邻关系
- 想选“前面的兄弟”？CSS 原生不支持（无“前兄弟选择器”），只能调整 HTML 顺序或换思路
实用小技巧：配合伪类和属性更灵活
单独用 + 有时不够，组合使用效果更强：
立即学习“前端免费学习笔记（深入）”；
-
input:focus + label→ 输入框获得焦点时，高亮它后面的 label（常用于浮动标签效果） -
:checked + .switch-track→ 配合隐藏 checkbox，控制后续的开关轨道样式 -
[data-status="error"] + .hint→ 根据属性动态显示/隐藏提示文字
替代方案参考（当 + 不适用时）
如果结构不满足“紧邻”要求，可考虑：
- 给目标元素加特定 class，由 JS 或后端逻辑控制（最稳妥）
- 用
~通用兄弟选择器 → 匹配后面所有符合条件的兄弟（不限紧邻） - 重构 HTML，把需要联动的元素放成真正相邻的兄弟
- CSS 作用域新特性（如
:has()）→div:has(input.error) .message可反向影响父容器下的子元素，但兼容性需查 Can I Use
基本上就这些。+ 选择器简单、高效、纯 CSS，用对场景事半功倍。
