queryselector可一次性选中多级嵌套节点，关键在于精准组合层级关系（空格表后代、>表子元素）与特征（类名、属性、伪类等），无需分步查询。
用 querySelector 一次性选中多级嵌套的复杂节点，关键不在“多写几层”，而在于**精准表达层级关系和特征组合**。它本身就能处理任意深度的嵌套，不需要分步查询或循环遍历。
用空格表示后代关系，灵活覆盖任意嵌套层级
空格是“后代选择器”，不苛求紧邻，只要满足结构路径即可。比如要找一个在 .container 内、经过至少两级嵌套、最终落在 div 里的 button[data-action="submit"]：
document.querySelector('.container div button[data-action="submit"]')
这会匹配：
<div class="container"> <br> <section><br> <article><br> <button data-action="submit">提交</button><br> </article><br> </section><br> </div>
即使中间插入更多层级（如 nav > ul > li > div），只要最终路径满足 .container → 任意 div → button[data-action="submit"]，就能命中。
用 > 明确子元素关系，避免意外匹配
当必须限定“直接子级”时，用 > 替代空格。例如只取 .form 下第一层 .field 里的 input[type="email"]：
document.querySelector('.form > .field > input[type="email"]')
这样不会误选到 .form > .group > .field > input 这类更深的节点。
常见组合写法：
-
.card .header h1—— 卡片内任意位置的标题（宽松） -
.card > .header > h1—— 卡片的直接子 header 下的直接子 h1（严格） -
main section#intro article p strong—— 多重语义+ID+标签混合定位
组合属性、类名、伪类，缩小目标范围
复杂结构往往靠“唯一性特征”来锁定。不必依赖 DOM 深度，优先加限制条件：
- 用
[data-id="123"]定位动态生成的节点 - 用
:nth-child(2)或:last-of-type选特定序位（慎用，易受结构变动影响） - 用
.item:not(.disabled) button.save排除禁用状态 - 多个类一起写：
.modal.is-open .content .form input.required
示例：找“当前激活的选项卡里，第三个面板中带红色警示图标的输入框”
document.querySelector('.tabs .tab.active .panels .panel:nth-child(3) .icon.warning + input')
调试技巧：先在浏览器控制台验证选择器
别急着写进代码。打开 DevTools → Console，粘贴你的选择器，用 $$()（Chrome/Firefox）快速预览匹配结果：
$$('.sidebar nav a[href^="/user/"]:not([href$="/edit"])')
如果返回空数组，就说明选择器没写对。此时可逐步删减右边部分，比如先试 '.sidebar nav'，再加 a[href^="/user/"]，逐段排查。
小提示：
- 用
document.querySelectorAll查看是否匹配多个，确认选择器是否太宽泛 - 遇到转义字符（如 ID 含点号
id="user.name"），写成#user\.name - 类名含特殊符号（如
class="btn--primary"）无需转义，直接写.btn--primary
