相邻兄弟选择器+只匹配紧挨前一元素后的同级同父元素，如A+B选中所有紧邻A后的B；若中间存在其他元素则不匹配，需确保HTML结构严格紧邻。
相邻兄弟选择器 + 的基本用法
相邻兄弟选择器 + 只匹配**紧挨在前一个元素后面**的同级元素，且二者必须有同一个父元素。它不匹配更后面的兄弟，也不跨层级生效。
- 写法是：
A + B，表示“选中所有紧跟在A元素之后的B元素” -
A和B必须是同级、同父，且B紧邻A（中间不能有其他元素） - 如果
A后面是div，再后面才是p，那么p不会被div + p选中
常见误用：为什么 + 没生效？
最常踩的坑是误以为 + 能“向后找任意一个”，或忽略了 HTML 结构是否满足“紧邻”条件。
- HTML 中两个元素之间有空格、换行、注释，不影响选择器匹配（浏览器会忽略这些空白节点）
- 但如果有实际元素插在中间，比如
标题
提示正文
h2 + p不会匹配到p -
div + .active不会匹配div后面第 5 个带active类的div；它只看第一个紧邻的 -
伪元素（如
::before）和文本节点不能作为+的左侧主体（A必须是真实元素）
对比 + 和 ~：什么时候该换用通用兄弟选择器
如果你需要选中“后面所有符合条件的兄弟”，而不是仅第一个，就得换用 ~。
立即学习“前端免费学习笔记（深入）”；
h2 + p {
color: blue;
}
h2 ~ p {
font-weight: bold;
}-
h2 + p：只给h2后面**第一个**p加蓝色 -
h2 ~ p：给h2后面**所有**p加粗（不管中间隔了几个其他元素） - 性能上，
+略快于~，但差异极小，日常无需为此切换
实用场景示例：表单错误提示联动
常见需求：当 input 有 error 类时，让紧随其后的 .error-message 显示出来。
input.error + .error-message {
display: block;
}
.error-message {
display: none;
color: #d32f2f;
}- 结构必须是：
- 如果中间加了
或 - 想兼容中间可能插入元素的情况？得改用 JS 控制类名，或换用
:has()（注意兼容性：Chrome 105+、Safari 15.4+ 支持，Firefox 尚未支持）
相邻兄弟选择器看着简单，真正卡住人的往往是 HTML 结构里那个看不见的“紧邻”条件——多检查一遍 DOM 层级，比反复调样式更省时间。
