.selenium 的 `by.classname()` 不支持复合类名，`by.cssselector()` 也不能直接传入空格分隔的类名字符串；需改用 css 选择器（以点连接多个类）或 xpath（使用 `contains(@class, ...)` 模糊匹配）来精准定位含 tailwind 风格多类名的 div 元素。
在使用 Java + Selenium 进行 Web 自动化测试时，遇到类似 Tailwind CSS 生成的多类名（如 flex h-10 w-10 items-center justify-center...）非常常见。但初学者常误将整个 class 属性值当作单个类名传给 By.className()，导致 InvalidSelectorException: Compound class names are not permitted —— 因为该方法仅接受单一、不带空格的类名（如 "flex"），不支持空格分隔的多个类。
同样，若直接将空格分隔的类名字符串传给 By.cssSelector()（如 "flex h-10 w-10..."），会触发 invalid selector 错误，因为 CSS 选择器中空格表示后代关系，而非“同时拥有这些类”。
✅ 正确做法如下：
✅ 方案一：CSS 选择器（推荐，性能更优）
将每个类名前加 .，用 . 连接（表示“同时具备所有这些类”）：
立即学习“Java免费学习笔记（深入）”；
WebElement btn = driver.findElement(By.cssSelector(
"div.flex.h-10.w-10.items-center.justify-center.rounded-full.border-4.border-white.font-SFProBold.text-base.sm\:h-16.sm\:w-16.sm\:text-xl"
));⚠️ 注意：Tailwind 中的响应式类（如 sm:h-16）含冒号 :，在 CSS 选择器中需转义为 sm\:h-16（Java 字符串中写两个反斜杠）。
✅ 方案二：XPath（语义清晰，容错性高）
利用 contains(@class, ...) 进行子字符串匹配（注意：此方式不区分单词边界，慎用于类名易重叠场景）：
WebElement btn = driver.findElement(By.xpath(
"//div[contains(@class, 'flex h-10 w-10 items-center justify-center rounded-full border-4 border-white font-SFProBold text-base sm:h-16 sm:w-16 sm:text-xl')]"
));✅ 方案三（进阶）：组合唯一特征提升稳定性
上述长类名易随前端重构变动。更健壮的做法是结合语义属性与部分类名，例如：
// 利用内部文本 + 关键布局类
WebElement btn = driver.findElement(By.xpath("//div[contains(@class, 'flex') and contains(@class, 'rounded-full') and text()='Yes']"));
// 或结合父容器结构（更可靠）
WebElement btn = driver.findElement(By.cssSelector(
"div.fixed.bottom-5.right-5 > div.flex.rounded-full"
));? 关键总结：
- ❌ By.className("flex h-10 ...") → 错误：只允许单类名；
- ❌ By.cssSelector("flex h-10 ...") → 错误：这不是合法 CSS 选择器；
- ✅ By.cssSelector("div.flex.h-10.w-10...") → 正确：. 表示“具有该类”，连续写表示“同时具有”；
- ✅ By.xpath("//*[contains(@class, 'flex h-10 ...')]") → 正确：基于 class 属性值的模糊匹配；
- ? 建议优先使用 CSS 选择器（执行快、语法简洁），并在类名过长或动态时，转向结构化定位（如父子关系 + 文本内容）以增强脚本鲁棒性。
