如何结合缓存DOM元素使用CSS相邻兄弟选择器？

你没法直接通过myEl.querySelector()实现这个需求，原因很简单：querySelector()的查找范围仅限于调用元素的后代节点，兄弟元素并不在这个范围内。:scope伪类确实能限定查找范围，但它的作用是把查找范围锁定在当前元素的子树里，依然无法跨到兄弟节点层级。

替代方案：使用nextElementSibling #

如果只是想获取下一个紧邻的兄弟元素，直接用Element.nextElementSibling属性即可，完全不需要涉及父节点：

const aa = document.querySelector('div');
const bb = aa.nextElementSibling;
console.log(bb.classList[0]); // 输出abe

如果需要筛选符合特定选择器的兄弟元素（比如确保是<aside>标签），可以结合Element.matches()做校验，甚至遍历后续兄弟找到目标：

const aa = document.querySelector('div');
let nextSibling = aa.nextElementSibling;
// 遍历后续兄弟，找到第一个符合选择器的元素
while (nextSibling) {
  if (nextSibling.matches('aside')) {
    console.log(nextSibling.classList[0]);
    break;
  }
  nextSibling = nextSibling.nextElementSibling;
}

为什么你的原代码无法工作 #

看你提供的代码示例：

const bb = aa.querySelector(':scope + aside');

这里的:scope + aside试图选择当前元素的下一个兄弟，但querySelector()只会在aa的后代里查找，所以永远找不到外部的<aside>节点——那个节点是aa的父节点的子元素，不属于aa的后代树。

内容的提问来源于stack exchange，提问作者cssyphus