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"></button> -
document.querySelectorAll('.card.active.highlight')→ 匹配同时有card、active、highlight三个类的元素
注意:顺序无关,只要 class 属性中完整包含这些类(以空格分隔)就匹配。
组合其他选择器增强过滤
可以和标签名、属性、伪类等混用,提升精度:
-
document.querySelector('div.error.message')→ 必须是<div> 且同时有 <code>error和message类 -
document.querySelector('[data-status="pending"].task')→ 具有指定属性 且 包含task类的元素 -
document.querySelector('.nav a.active')→.nav内部的<a class="active"></a>(后代关系,中间有空格) -
'.a.b'是“同一个元素同时有 a 和 b 类”(交集) -
'.a .b'是“a 元素内部任意后代中带 b 类的元素”(后代选择器,注意空格) - 类名含特殊字符(如连字符、下划线)无需转义,但若含点、井号等,需用反斜杠转义,例如:
'.my\.class'
常见误区提醒
避免混淆「并列类」和「父子/后代」:











