JavaScript中querySelector支持CSS类选择器：单类用“.class”；多类交集连写如“.a.b”；可与标签、属性、伪类组合；注意“.a.b”是同元素多类，“.a .b”是后代关系。
在 JavaScript 中，可以通过 querySelector 使用 CSS 类选择器语法，直接按一个或多个 class 名精确筛选元素。
单个 className 过滤
最基础的方式是用点号（.）加类名，例如：
-
document.querySelector('.btn')—— 获取第一个带class="btn"的元素 -
document.querySelectorAll('.item')—— 获取所有带class="item"的元素 NodeList
多个 className 同时匹配（交集）
当元素需同时具备多个 class（即 class 属性中包含全部指定类），把它们连写、不加空格即可：
-
document.querySelector('.btn.primary')→ 匹配<button class="btn primary"> -
document.querySelectorAll('.card.active.highlight')→ 匹配同时有card、active、highlight三个类的元素
注意：顺序无关，只要 class 属性中完整包含这些类（以空格分隔）就匹配。
立即学习“Java免费学习笔记（深入）”；
组合其他选择器增强过滤
可以和标签名、属性、伪类等混用，提升精度：
-
document.querySelector('div.error.message')→ 必须是<div>且同时有error和message类 -
document.querySelector('[data-status="pending"].task')→ 具有指定属性 且 包含task类的元素 -
document.querySelector('.nav a.active')→.nav内部的<a class="active">（后代关系，中间有空格）
常见误区提醒
避免混淆「并列类」和「父子/后代」：
-
'.a.b'是“同一个元素同时有 a 和 b 类”（交集） -
'.a .b'是“a 元素内部任意后代中带 b 类的元素”（后代选择器，注意空格） - 类名含特殊字符（如连字符、下划线）无需转义，但若含点、井号等，需用反斜杠转义，例如：
'.my\.class'
