使用 css 选择器的直接子选择符 `>` 可严格限定层级关系，配合 `queryselectorall` 能准确获取目标层级的 `.nested` 元素，避免误选更深层的孙子节点。
在处理嵌套结构（如树形菜单、递归模板渲染的 DOM）时，常需仅选取某一层级的直接子元素，而非所有匹配类名的后代元素。例如，在 <ul id="tree_view"> 中，你希望只获取“Node 1”和“Node 2”各自 <ul> 下的直接 <li class="nested">（即 Leaf 1、Leaf 2、Leaf 3、Leaf 4），而排除更深一层中“Leaf 1-1”所在的 <li class="nested">（它是“Leaf 1”的子节点的子节点）。
关键在于：CSS 选择器本身不支持“第 N 层子元素”的绝对定位，但可通过明确父级路径 + > 实现精确控制。
✅ 正确做法：利用层级路径限定作用域
假设你已定位到某个 .box 元素（如 Node 1 对应的 <span class="box">），其结构为：
<li>
<span class="box">Node 1</span>
<ul> <!-- 这个 ul 是 .box 的直接兄弟，也是 .nested 的直接父级 -->
<li class="nested">Leaf 1</li>
<li class="nested">Leaf 2</li>
</ul>
</li>那么，.nested 元素是该 <ul> 的直接子元素，而该 <ul> 又是 .box 元素的下一个兄弟元素（或更稳妥地：.box 的父 <li> 的子 <ul>）。因此可这样选取：
const boxElement = document.querySelector('.box'); // e.g., "Node 1"
const parentLi = boxElement.closest('li'); // 定位到包裹 Node 1 的 <li>
const nestedChildren = parentLi.querySelector('ul').querySelectorAll(':scope > li.nested');
// ✅ :scope 确保只查 ul 的直接子 li.nested，不深入孙子层或者更简洁通用（无需依赖 :scope，兼容性更好）：
const boxElement = document.querySelector('.box');
const parentLi = boxElement.closest('li');
const nestedElements = parentLi.querySelectorAll('ul > li.nested');
// ✅ ul > li.nested：只匹配 parentLi 内部 ul 的直接子 li.nested⚠️ 注意事项：
- ❌ 避免使用 * > * > .nested：通配符 * 会匹配任意祖先，语义模糊且易受 DOM 结构微调影响；
- ✅ 推荐显式路径（如 ul > li.nested）或结合 closest() 定位上下文，提升可读性与健壮性；
- :scope 是现代方案（Chrome 29+/Firefox 32+），若需兼容旧浏览器，请用 parent.querySelectorAll('ul > li.nested') 替代；
- 若需动态匹配多个 .box（如 “Node 1” 和 “Node 2”），可遍历所有 .box 并分别执行上述逻辑。
? 总结：querySelectorAll 的能力取决于你提供的选择器精度。“直接子”必须用 > 显式声明，并锚定在可靠的父容器上——与其猜测层级深度，不如用 closest() 或结构语义（如兄弟元素、父级标签）建立稳定选择路径。
