为何在querySelector中结合:scope使用兄弟组合器会失效？

当我们已经获取到一个DOM元素，想要选择它的后续匹配兄弟元素时，CSS中可以用元素选择器 ~ 兄弟选择器的语法，但在调用该元素的querySelector方法时，使用:scope ~ .active却无法得到预期结果。

示例代码如下：

HTML结构 #

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

JavaScript代码 #

document.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById('container');
  // 获取目标元素
  const item = container.querySelector('.item:nth-child(2)');

  // 无效的写法
  const nextActiveFromSibling = item.querySelector(':scope ~ .active');
  console.log(`From sibling success: ${nextActiveFromSibling !== null}`);

  // 有效的写法（依赖父元素和原元素的选择器）
  const nextActiveFromParent = container.querySelector('.item:nth-child(2) ~ .active');
  console.log(`From parent success: ${nextActiveFromParent !== null}`);
});

运行输出 #

From sibling success: false
From parent success: true

原因解析 #

querySelector和querySelectorAll的查找范围仅限于当前元素的子树（即该元素的所有后代节点），而兄弟元素属于当前元素的同级节点，并不在这个查找范围内。

:scope伪选择器在这里代表调用querySelector的元素本身，但兄弟组合器~要匹配的是和:scope同级的后续节点——这些节点不在:scope的子树里，因此无论怎么写，都无法通过当前元素的querySelector找到兄弟元素。

解决方案 #

方案1：通过父元素查找

利用当前元素的parentElement获取父节点，然后在父节点上执行查询，这样就能正确使用兄弟组合器：

// 直接结合原元素的位置选择器
const nextActive = item.parentElement.querySelector(':scope > .item:nth-child(2) ~ .active');

// 更通用的写法：给原元素加唯一标识后定位
item.dataset.id = 'target-item';
const nextActive = item.parentElement.querySelector('[data-id="target-item"] ~ .active');

方案2：遍历后续兄弟节点

直接通过nextElementSibling遍历后续兄弟，直到找到匹配的元素：

let nextActive = item.nextElementSibling;
while (nextActive) {
  if (nextActive.classList.contains('active')) {
    break;
  }
  nextActive = nextActive.nextElementSibling;
}
// 循环结束后，nextActive即为目标元素（未找到则为null）

方案3：使用XPath查询

XPath支持直接选择后续兄弟节点，语法更灵活：

const xpathResult = document.evaluate(
  'following-sibling::div[contains(@class, "active")]',
  item,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
);
const nextActive = xpathResult.singleNodeValue;

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