如何用CSS选择器获取特定属性元素并排除同属性元素的后代？

使用元素属性标识DOM树形结构，每个分支节点需要管理其子节点。当前通过以下JavaScript代码实现直接子节点的获取：

const directChildNodes = [...nodeElement.querySelectorAll(`[tree-node-name="${this.treeName}"]`)]
  // filter all results where the current node is the closest parent
  .filter((el: Element) =>
    el.parentElement?.closest(`[tree-node-name="${this.treeName}"]`) === this.host.nativeElement);

该方案先获取所有指定属性的元素再过滤，效率较低。尝试用CSS选择器直接实现，但以下选择器无效：

nodeElement.querySelectorAll(
  `[tree-node-name="${this.treeName}"]:not([tree-node-name="${this.treeName}"] [tree-node-name="${this.treeName}"])`
)]

寻求可行的解决方案。

正确的CSS选择器实现 #

使用:scope伪类限定选择范围，结合属性选择器与:not()伪类，可以直接筛选出目标元素：

// 直接在宿主元素上调用querySelectorAll，用:scope限定范围
const directChildNodes = this.host.nativeElement.querySelectorAll(
  `:scope [tree-node-name="${this.treeName}"]:not(:scope [tree-node-name="${this.treeName}"] [tree-node-name="${this.treeName}"])`
);

原理说明 #

1. :scope伪类：代表调用querySelectorAll的元素（即this.host.nativeElement），确保所有选择逻辑都限定在当前节点的子树内。
2. :scope [tree-node-name="${this.treeName}"]：选中当前节点子树内所有带指定属性的元素。
3. :not(:scope [tree-node-name="${this.treeName}"] [tree-node-name="${this.treeName}"])：排除那些被当前节点子树内其他tree-node元素包含的节点，最终只保留树形结构中当前节点的直接子节点。

为什么之前的选择器无效 #

你之前的选择器没有用:scope限定范围，:not()中的规则是全局生效的——它会排除所有被其他tree-node包含的元素，而不是仅排除当前节点子树内被其他tree-node包含的元素，导致筛选结果不符合预期。

兼容性说明 #

:scope伪类已被Chrome、Firefox、Edge等现代浏览器支持，若需兼容旧版浏览器，可以考虑为中间非节点元素添加统一类名，结合直接子选择器（>）实现，例如：

// 假设中间非节点元素都有类名tree-wrapper
const directChildNodes = this.host.nativeElement.querySelectorAll(
  `:scope > .tree-wrapper [tree-node-name="${this.treeName}"]`
);

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