为何在querySelector中使用:scope + 相邻兄弟选择器失效？

Element.querySelector()的查找范围仅限当前元素的后代节点，你用:scope + aside（相邻兄弟选择器）是要找与aa（div元素）同级的aside，但这个aside并不在div的子树范围内，所以自然查不到。而:scope > aside是找div的直接子元素，属于div的后代，所以能成功匹配。

要通过缓存的aa元素选中同级的aside.abe.bob.cam，可以用以下几种方法：

方法1：直接获取相邻兄弟并验证 #

利用nextElementSibling获取aa的下一个同级元素，再验证是否是目标aside：

const aa = document.querySelector('div');
const bb = aa.nextElementSibling;
// 检查是否为目标元素
if (bb && bb.matches('aside.abe.bob.cam')) {
  console.log(bb.classList[0]); // 输出 "abe"
}

方法2：通过父元素查询 #

借助aa的父元素，在父元素的范围内用相邻选择器定位目标：

const aa = document.querySelector('div');
const bb = aa.parentElement.querySelector(':scope > div + aside.abe.bob.cam');
console.log(bb?.classList[0]); // 输出 "abe"

方法3：结合类名直接判断 #

如果确定目标就是aa的下一个元素，也可以直接校验类名：

const aa = document.querySelector('div');
const bb = aa.nextElementSibling;
if (bb?.classList.contains('abe') && bb?.classList.contains('bob') && bb?.classList.contains('cam')) {
  console.log(bb.classList[0]); // 输出 "abe"
}

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