本文详解 Jsoup 中 CSS 选择器对多类名元素的正确写法，重点纠正常见的空格与点号误用问题，并通过实例演示如何准确提取同时拥有多个 class 的 标签的 href 属性。
本文详解 jsoup 中 css 选择器对多类名元素的正确写法，重点纠正常见的空格与点号误用问题，并通过实例演示如何准确提取同时拥有多个 class 的 `` 标签的 `href` 属性。
在使用 Jsoup 进行 HTML 解析时，通过 CSS 选择器定位特定元素是高频操作。但一个常见误区是混淆 并列类名（同一元素上多个 class） 与 后代选择器（父子/嵌套关系） 的语法差异。例如，目标元素为：
<a href="https://www.php.cn/link/56ae29d4498e449970c307bd958b128b" class="ssrcss-6m4230-PromoLink e1f5wbog1">...</a>
该 <a></a> 标签同时拥有两个 class：ssrcss-6m4230-PromoLink 和 e1f5wbog1。若想匹配它，必须将两个类名用连续的点号 . 连接，表示“同一元素同时具备这些 class”。
✅ 正确写法（推荐）：
Elements links = document.select("a[href].ssrcss-6m4230-PromoLink.e1f5wbog1");❌ 错误写法（原代码问题所在）：
立即学习“前端免费学习笔记（深入）”；
Elements links = document.select("a[href].ssrcss-6m4230-PromoLink e1f5wbog1"); // ❌ 含空格 → 后代选择器此处的空格会被 Jsoup 解析为“后代关系”，即查找：
→ 具有 href 属性且 class 为 ssrcss-6m4230-PromoLink 的 <a></a> 元素，
→ 再在其任意嵌套深度的后代中查找标签名为 e1f5wbog1 的元素（注意：e1f5wbog1 并非合法 HTML 标签名，实际会匹配失败，导致 links 为空）。
此外，还可使用更通用、语义更清晰的写法（尤其适用于 class 名含特殊字符或需动态拼接时）：
Elements links = document.select("a[href][class~=ssrcss-6m4230-PromoLink.*e1f5wbog1]");其中 ~= 表示 class 属性值正则匹配，.* 表示任意字符（因 class 属性值是空格分隔的字符串），可稳健应对多 class 顺序不确定的情况。
完整可运行示例：
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
public class LinkExtractor {
public static void main(String[] args) {
String html = "<a href=\"https://www.php.cn/link/56ae29d4498e449970c307bd958b128b\" class=\"ssrcss-6m4230-PromoLink e1f5wbog1\">" +
"<span role=\"text\"><p class=\"ssrcss-6arcww-PromoHeadline e1f5wbog6\">" +
"<span aria-hidden=\"false\">McIlroy's 'perfect preparation' for Hoylake Open</span></p></span></a>";
Document doc = Jsoup.parse(html);
// ✅ 关键修正：用 . 连接多个 class，而非空格
Elements links = doc.select("a[href].ssrcss-6m4230-PromoLink.e1f5wbog1");
for (Element link : links) {
System.out.println("my beautiful link : " + link.attr("href"));
}
// 输出：my beautiful link : https://www.php.cn/link/56ae29d4498e449970c307bd958b128b
}
}⚠️ 注意事项：
- Jsoup 的 CSS 选择器严格遵循 W3C 规范：
.class1.class2表示“同时拥有 class1 和 class2”，而.class1 .class2（中间有空格）表示“class1 元素内部的 class2 后代”； - 若 class 名动态生成（如 BEM 风格）、存在不确定性，建议结合
[class~=regex]或先用element.className()获取完整 class 字符串再判断； - 始终检查
Elements是否为空（links.isEmpty()），避免空指针；调试时可用doc.body().html()打印解析后结构辅助验证。
掌握这一细节，即可精准定位复合 class 的链接，大幅提升网页数据提取的可靠性与开发效率。
