相邻兄弟选择器+只匹配紧邻的下一个同级同父元素，如label + input；它不跨节点、不向前、不穿透shadow dom，且ie7+已完全支持。
用 CSS 相邻兄弟选择器 + 快速选中紧邻的下一个同级元素
当你知道某个元素（比如 <label></label>）后面一定跟着一个 <input>，且两者同父、位置紧邻时，label + input 是最轻量、无需 JS 的解法。它只匹配“严格下一个”，不跨过中间节点。
常见错误是误以为 div + p 能选中所有后续 <p></p> —— 实际上它只会命中紧跟在 <div> 后面的那一个 <code><p></p>，中间插了其他标签就断链。
- 适用场景：表单标签对、标题+段落、图标+文字说明等结构稳定、顺序固定的组合
- 注意空白文本节点不影响匹配，但注释节点或非元素节点会中断“相邻”关系
- 不能反向使用（没有
-选择器），也不能跳过多个兄弟
jQuery 中用 next() 和 nextAll() 动态获取后续同级元素
next() 和 nextAll() 是 jQuery 最常用的一对方法，区别在于是否“只取第一个”。它们都依赖 DOM 实际顺序，不受 CSS 显示状态影响（哪怕 display: none 也会被选中）。
典型陷阱是 selector 返回多个元素时，$('li').next() 会为每个 <li> 分别找它的下一个兄弟，结果可能混杂不同层级的节点。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
$(el).next()→ 只返回紧邻的下一个同级元素（或空 jQuery 对象） -
$(el).nextAll()→ 返回它之后所有同级元素（含多个<div>、<code><p></p>等） - 加过滤器更安全，例如
$(el).next('button')或$(el).nextAll('.status') - 若需包含自身，用
.addBack()（旧版叫.andSelf()），不是.nextAll().andSelf()那种写法 - 正确写法：
(//*[normalize-space()='Monthly:']/following-sibling::div)[1] -
normalize-space()必须加，否则前后空格或换行会导致匹配失败 - 如果页面有多个 “Monthly:”，建议先限定父容器范围，例如：
//section[@id='quota']//*[normalize-space()='Monthly:']/following-sibling::div[1] - 注意：该轴不匹配自身、祖先、后代，也不匹配前序兄弟（prev-sibling 不存在，得换思路）
-
$(el).siblings('img')→ 所有同父的<img>，不管在前在后 -
$(el).next('img')→ 只看紧挨着后面的那一个，没找到就空 - 性能上，
next()比siblings()略快，因为不遍历整个兄弟列表 - 调试时可打印
$(el).siblings().length和$(el).next().length对比，确认 DOM 结构是否符合预期
XPath 里用 following-sibling:: 定位语义关联的后续兄弟节点
爬虫或 Selenium 场景下，常要根据可见文本（如 “Monthly:”）定位它后面那个 <div> 里的数值。这时不能靠索引（<code>//div[2]），而要用 following-sibling:: 轴做语义锚定。
关键点在于：following-sibling:: 不限于“下一个”，而是“所有后续同父兄弟”，所以必须加 [1] 截断，否则可能拿到一堆无关节点。
为什么不用 siblings()？它和 next() 的本质区别在哪
siblings() 是“全方向”的：它把当前元素的所有同父兄弟（无论前后）一股脑拉出来，再按需过滤。而 next() / prev() 是“单向有序”的，天然保留 DOM 顺序，更适合做链式操作或条件判断。
容易踩坑的是混淆“同级”和“相邻”——siblings() 会把前面的 <h2></h2> 和后面的 <p></p> 全部返回，如果你只想处理后一个，就得额外加 :eq(0) 或用 next() 更直白。
