在Puppeteer的自动化操作中，通过CSS选择器定位网页元素是最常用的方式之一，当目标元素同时拥有多个类名时，就需要使用多类名CSS选择器来完成精准匹配。很多开发者在初次使用时容易因为语法错误导致选择器失效，影响脚本的正常运行。
多类名CSS选择器的基本语法
多类名CSS选择器的核心规则是：多个类名之间不需要空格，直接连续拼接，每个类名前都要加英文点号。比如一个元素的class属性是class="btn primary large"，它同时拥有btn、primary、large三个类名，对应的多类名选择器就是.btn.primary.large。
这里要注意和后代选择器的区别，后代选择器是用空格分隔不同元素的选择器，比如.btn .primary表示class为btn的元素内部的class为primary的子元素，和多类名选择器的作用完全不同。
常见使用误区
- 类名之间加空格：写成
.btn .primary .large，这会被解析为后代选择器，无法匹配到同时拥有三个类名的单个元素。 - 遗漏点号：写成
btnprimarylarge，这不是合法的CSS选择器，Puppeteer会直接报错。 - 顺序错误：部分开发者认为类名顺序需要和class属性里的顺序一致，实际上CSS选择器匹配类名时不关心顺序，
.primary.btn.large和.btn.primary.large的效果完全一致。
Puppeteer中的使用示例
下面通过实际的代码示例展示多类名选择器的正确使用方式，假设我们要操作的网页中有如下元素：
<div class="card active featured" id="target"> 这是目标元素内容 </div>
如果我们想要通过Puppeteer获取这个元素，正确的选择器写法如下：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('http://127.0.0.1:3000/test');
// 正确的多类名选择器，匹配同时拥有card、active、featured三个类名的元素
const element = await page.$('.card.active.featured');
// 获取元素的文本内容
const text = await page.evaluate(el => el.textContent, element);
console.log(text); // 输出：这是目标元素内容
// 也可以用于点击、输入等操作
await element.click();
await browser.close();
})();
如果写成错误的带空格的选择器.card .active .featured，page.$的返回值会是null，因为页面中不存在这样的后代元素结构。
特殊场景处理
如果类名中包含特殊字符，比如横线、下划线，不需要额外处理，直接拼接即可。例如元素class是class="btn-primary large-btn"，选择器就是.btn-primary.large-btn。
另外，多类名选择器也可以和其他选择器组合使用，比如结合id选择器：#target.btn.active，表示id为target且同时拥有btn和active类名的元素，匹配精度会更高。
注意：Puppeteer的CSS选择器语法和浏览器原生CSS选择器语法完全一致，只要符合CSS规范的选择器都可以在Puppeteer中使用，多类名选择器也不例外。
验证选择器是否有效的方法
如果不确定自己写的多类名选择器是否正确，可以先在浏览器的开发者工具控制台中使用document.querySelector方法测试，比如输入document.querySelector('.card.active.featured')，如果返回对应的元素，说明选择器是正确的，再放到Puppeteer脚本中使用即可，这样可以快速排查语法问题。