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