querySelector支持CSS选择器语法实现多条件组合查询，关键在于正确拼接字符串：空格表后代、>表直接子元素、:is()/:where()表“或”逻辑，属性/类/伪类并列表“且”关系。
querySelector 支持用 CSS 选择器语法写多条件组合查询，关键在于正确拼接选择器字符串，而不是传多个参数。
用空格表示后代关系（最常用）
比如找 body 内所有 class 为 active 的 button 元素：
-
document.querySelector('body button.active')→ 找body下任意层级的button.active -
document.querySelector('div#header a.external')→ 找 id 是header的div里带external类的链接
用 > 表示子元素（严格一层）
限制只匹配直接子元素：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
-
document.querySelector('ul.nav > li:first-child')→ 找ul.nav的第一个li子项 -
document.querySelector('form.login > input[type="password"]')→ 找form.login下直接子级的密码输入框
用 :is() 或 :where() 匹配多种可能
类似“或”逻辑，适合不确定具体类型但有共同特征的情况：
立即学习“Java免费学习笔记（深入）”；
-
document.querySelector(':is(button, input[type="submit"], a.submit)')→ 找任意一种提交控件 -
document.querySelector('div:is(.error, .warning)')→ 找带error或warning类的div -
注意：
:is()和:where()在旧版浏览器中需检查兼容性（如 IE 不支持）
属性 + 类 + 伪类可以混写（无顺序要求）
CSS 选择器规则依然适用，多个条件并列即“且”关系：
-
document.querySelector('input.required[disabled]:valid')→ 同时满足：是input、有required类、有disabled属性、且表单验证通过 -
document.querySelector('a[href^="https://"][target="_blank"]')→ 外链且新窗口打开的链接
