在 Go 语言做网页抓取或本地 HTML 清洗时,goquery 是最常用的库之一。很多时候服务端渲染的页面会给一个元素同时挂好几个类,比如用来标记状态、布局和主题。如果我们只想选出那些同时拥有多个类名的节点,而不是只要命中其中一个类就返回,就需要理解 goquery 对 CSS 多选条件的处理方式。

连续类选择器的基本写法
goquery 的选择器字符串直接沿用 CSS 语法,由 cascadia 库解析。要匹配同时带有多个类的元素,正确做法是将多个类选择器紧挨着写,中间不要有空格。例如页面中有如下结构:
<div class="user active vip">张三</div> <div class="user active">李四</div> <div class="user vip">王五</div>
如果我们使用 div.user.active.vip,就只会选出第一个 div,因为它同时具备 user、active、vip 三个类。空格在 CSS 选择器里代表后代关系,一旦写成 div.user .active .vip,含义就变成查找 div.user 内部后代里带 active 类、再其内部后代里带 vip 类的节点,这完全偏离了原本意图。
下面是一段完整的 Go 示例,演示如何精确提取同时具有三个类的元素文本:
package main
import (
"fmt"
"strings"
"github.com/PuerkitoBio/goquery"
)
func main() {
html := `<div class="user active vip">张三</div>
<div class="user active">李四</div>
<div class="user vip">王五</div>`
doc, err := goquery.NewDocumentFromReader(strings.NewReader(html))
if err != nil {
panic(err)
}
// 连续类选择器,精确匹配同时带有三个类的元素
doc.Find("div.user.active.vip").Each(func(i int, s *goquery.Selection) {
fmt.Println(s.Text())
})
}
运行后程序只打印“张三”,说明多类同时匹配生效。这种写法简洁且性能较好,因为 cascadia 会直接编译成对应的匹配器,不需要二次过滤。
使用属性选择器作为兜底方案
在某些动态生成的 HTML 中,类名顺序可能不固定,或者类名之间含有空格以外分隔符的变体。此时也可以用属性选择器显式判断 class 属性内容。虽然连续类选择器内部也是检查 class 词列表,但手写属性选择器能应对更刁钻的情况。
package main
import (
"fmt"
"strings"
"github.com/PuerkitoBio/goquery"
)
func main() {
html := `<div class="vip user active">张三</div>
<div class="active user">李四</div>`
doc, _ := goquery.NewDocumentFromReader(strings.NewReader(html))
// 利用属性选择器,通过正则式匹配多个类名
doc.Find(`div[class~="user"][class~="active"][class~="vip"]`).Each(func(i int, s *goquery.Selection) {
fmt.Println("命中:", s.Text())
})
}
这里的 [class~="user"] 表示 class 属性中以空格分隔的单词列表包含 user。链式书写多个此类条件,同样能实现“同时拥有”的语义。当类名顺序混乱或你还需要排除某些组合时,属性选择器更灵活。
不过属性选择器在 cascadia 里的执行效率略低于原生类选择器,如果页面规模巨大且只需简单多类过滤,优先用连续类写法。
常见误区与调试建议
初学者常把“多类匹配”和“或关系匹配”搞混。如果写 div.user, div.active,逗号代表分组选择,会返回带 user 或 active 的所有 div,这不是精确匹配。另外,有些人试图用 div.user.active.vip 去匹配 class="user-active-vip" 这种连字符类名,结果什么也选不到,因为连字符是类名一部分,不是分隔符。
调试时可以先把 HTML 存入本地文件,用浏览器开发者工具验证 CSS 选择器是否能选中目标,再把同样的选择器字符串搬到 goquery 中。由于二者都遵循标准 CSS 选择规范,浏览器能选中的 goquery 基本也能选中。
| 写法 | 含义 | 是否精确多类 |
|---|---|---|
| div.a.b | 同时有 a 和 b 类的 div | 是 |
| div.a .b | div.a 后代中带 b 类的元素 | 否 |
| div.a, div.b | 带 a 类或带 b 类的 div | 否 |
掌握以上规则后,你在用 goquery 处理复杂页面时,就能稳定提取那些被多个状态类标记的关键节点,不再被无关元素干扰。