相邻兄弟选择器“+”仅匹配紧邻、同级、在目标元素之后的下一个元素；如h2 + p只选中紧跟h2后的第一个p，中间插入其他元素即失效。
相邻兄弟选择器 + 的基本用法
想选中某个标题（比如 ）后面紧挨着的下一个同级元素，就用 +。它只匹配**紧邻的、同级的、在它之后的**那个元素，不跨元素、不跳过、不找后代。
常见错误是以为 h2 + p 能选中所有 ，其实只选中紧跟在 后面的那个 ，后面再多个 就失效了。
-
h2 + p：只选中后面第一个 -
h2 + .content：只选中类为content且紧接在后面的元素 - 如果中间插了 、
+就断了，选不到为什么
h2 + p有时不生效？检查 DOM 结构相邻兄弟选择器对 HTML 结构非常敏感。实际开发中不生效，大概率是结构没对齐。
比如下面这段 HTML 看似合理，但
h2 + p无法匹配到任何内容：立即学习“前端免费学习笔记（深入）”；
标题
这段文字不会被 h2 + p 选中
因为
不是的直接兄弟，中间隔了一个。此时得换思路：h2 ~ p（通用兄弟选择器）或加 class 控制。- 确保目标元素和标题标签处于同一父容器下
- 避免用注释、换行符或空格“撑开”兄弟关系（浏览器会把换行视为空白文本节点，但现代浏览器通常忽略它对
+的影响；真正卡住的是元素节点） - 用浏览器开发者工具的「Elements」面板确认节点层级和顺序
替代方案：当相邻兄弟不够用时怎么选
如果目标内容不是紧挨着标题，或者结构不可控，
+就力不从心了。这时有更稳妥的路径：- 给标题后的容器加明确 class，比如
标题
…h2 + .section-content - 用通用兄弟选择器
~：例如h2 ~ p可匹配后面所有同级，不限定位置 - 改用 JavaScript 动态控制：获取
document.querySelector('h2')，再调用.nextElementSibling获取下一个元素节点（比 CSS 更可控）
兼容性与性能提醒
+是 CSS2.1 就支持的选择器，IE7+ 全都支持，完全不用操心兼容性问题。但它不是“高性能银弹”——如果页面里有大量
h2标签，又写了宽泛的规则如h2 + *，浏览器仍需逐个检查每个h2后面的节点，可能拖慢样式计算。更推荐限定类型：- ✅ 推荐：
h2 + p、h2 + .intro - ⚠️ 慎用：
h2 + *、h2 + div（如果div并不总在标题后）
真正容易被忽略的是：相邻兄弟选择器永远不向上匹配，也不向下深入子树。它只看“平级+紧邻”这一个条件，多一层嵌套、少一个标签，结果就完全不同。
