多类选择器必须连写不加空格，如 .classA.classB 表示同一元素同时拥有这两个类；加空格的 .classA .classB 是后代选择器。常见错误包括 document.querySelector(".btn primary") 返回 null，因缺失点号且误用空格。
多类选择器写法：不能加空格，必须连写
直接写 .classA.classB，不是 .classA .classB。后者是后代选择器，会去找 .classB 元素是否在 .classA 元素内部，而你要的是同一个元素同时拥有这两个类。
常见错误现象：document.querySelector(".btn primary") 返回 null；Puppeteer 中 page.click(".btn primary") 报错 “no node found”；Selenium 的 find_element(By.CSS_SELECTOR, ".card active") 找不到目标元素。
-
.btn.primary→ 匹配<button class="btn primary"> -
.container.sidebar.open→ 匹配同时含这三个类的元素 -
div.card.highlight→ 标签 + 多类组合，更精确
为什么连写能生效？CSS 选择器的匹配逻辑
CSS 规范中，连续书写多个以点开头的选择器（如 .a.b.c）表示“该元素必须同时声明所有这些类”，浏览器解析时会检查元素的 class 属性值是否包含全部指定类名（顺序无关，空格分隔即可）。
这和属性选择器 [class~="a"][class~="b"] 等价，但更简洁。注意：它不依赖类名出现顺序，class="b a c" 和 class="a b c" 都能被 .a.b.c 匹配到。
立即学习“前端免费学习笔记（深入）”；
性能影响几乎为零——现代浏览器对这类选择器做了高度优化，无需担心渲染开销。
和后代选择器混淆的典型场景
当你看到 HTML 中有嵌套结构，比如：<div class="list"><span class="item">text</span></div>，容易误以为 .list .item 是“多类”，其实它是“.list 内部任意深度的 .item”。真正要选“既是 list 又是 item”的元素，得写成 .list.item，对应 <div class="list item">。
容易踩的坑：
- 复制开发者工具里显示的完整 class 字符串（如
"btn btn-primary large"），然后直接粘贴进选择器写成.btn btn-primary large—— 缺少点号、多了空格 - 用 XPath 思维写 CSS，比如试图用
//div[contains(@class,'a') and contains(@class,'b')]的等效写法，结果硬套空格 - 在自动化脚本中混用 jQuery 风格（支持空格分隔多类）和原生 CSS API，导致行为不一致
调试建议：用浏览器控制台快速验证
打开 DevTools → Console，输入 document.querySelectorAll(".a.b")，看返回 NodeList 是否包含预期元素。如果为空，立刻检查：
- 目标元素实际 class 值是否真包含全部类名（注意大小写、拼写、多余空格）
- 是否误用了空格或逗号（
.a, .b是并集，.a .b是后代） - 元素是否动态插入（比如 React 渲染后才加类），需等 DOM 就绪再查
最简验证法：$$(".a.b")（Chrome 控制台快捷命令），比写全 document.querySelectorAll 更快。
多类选择器本身很简单，难的是在复杂项目里一眼分辨出你写的到底是“同元素多条件”还是“父子关系”——这个边界一旦模糊，后续所有定位都会偏移。
