querySelector 在元素上调用时并非仅搜索其子树，而是先在整个文档中匹配选择器，再筛选出目标元素的后代——因此可能返回调用者自身（若其符合选择器且是首个匹配项）。
`queryselector` 在元素上调用时并非仅搜索其子树，而是先在整个文档中匹配选择器，再筛选出目标元素的后代——因此可能返回调用者自身（若其符合选择器且是首个匹配项）。
在你的示例中：
<div class="aa" id="root">
<div class="bb" id="firstBB">xxx</div>
<div class="aa">
<div class="bb" id="secondBB">xxx</div>
</div>
</div>
<div>Result: <span id="result"></span>
</div>
执行：
const $1 = document.querySelector('#root').querySelector('.aa .bb');
关键点在于：.aa .bb 是一个后代选择器，表示“某个 .aa 元素内部的 .bb 元素”。而 #root 本身具有 class="aa"，其直接子元素
恰好满足 .aa .bb 关系（即 #root 是 .aa，#firstBB 是其后代 .bb）。更重要的是，根据 DOM 规范 和 MDN 文档：
querySelector() 首先在整个文档范围内收集所有匹配 '.aa .bb' 的元素（按文档顺序），然后从中筛选出属于调用者（即 #root）的后代的元素，最后返回第一个符合条件者。
整个文档中匹配 '.aa .bb' 的元素有两个：
- #firstBB（#root → .bb，直接子级，满足 .aa .bb）
- #secondBB（嵌套在内层 .aa 中，也满足）
但它们在文档中的出现顺序是：#firstBB 先于 #secondBB。因此 #firstBB 成为首个既全局匹配、又是 #root 后代的元素，被 $1 选中。
而 $2 的链式调用：
document.querySelector('#root').querySelector('.aa').querySelector('.bb')
等价于：
- 先取 #root.querySelector('.aa') → 返回 #root 自身（它有 class="aa"）；
- 再在其上调用 .querySelector('.bb') → 搜索 #root 的后代中第一个 .bb，结果仍是 #firstBB。
✅ 所以 $1 和 $2 都指向 #firstBB，行为完全符合标准，不是 bug，而是规范定义的精确语义。
⚠️ 注意事项：
- querySelector 不局限于调用元素的子元素范围，而是“全局匹配 + 后代过滤”；
- 若希望严格限制作用域（即只查子树，不考虑调用者自身是否匹配），应改用更明确的选择器，例如 :scope > .bb（配合 querySelector(':scope > .bb')），但需注意 :scope 在 querySelector 中的支持度（现代浏览器普遍支持，但旧版 Edge 不支持）；
- 更稳妥的替代方案是使用 element.children 或 element.querySelectorAll('.bb')[0] 配合遍历，确保仅检查直系或指定层级子元素。
总结：理解 querySelector 的“全局初筛 + 后代验证”机制，是避免此类困惑的关键。始终以规范为准，而非直觉假设。
