100 天学会爬虫 · Day 9：CSS Selector 是什么？和 XPath 该怎么选？

在前一天我们学习了XPath，它是爬虫中非常强大的解析工具。
但你在实际开发或阅读别人代码时，可能还会经常看到另一种写法：

soup.select(".article-title")

这就是CSS Selector（CSS 选择器）。

那么问题来了：

• CSS Selector 是什么？

• 和 XPath 有什么区别？

• 爬虫中到底该用哪一个？

今天这一篇，我们就把CSS Selector + XPath 的关系一次讲清楚。

🔍 一、什么是 CSS Selector？

CSS Selector 本来是前端用来给 HTML元素加样式的规则，例如：

.title { color: red; }

后来爬虫工具（如 BeautifulSoup）复用了这套规则，用来定位 HTML 节点。

在爬虫中，CSS Selector 的作用是：

通过 class、id、标签、层级关系，快速定位网页元素

🧠 二、为什么爬虫也能用 CSS Selector？

因为 HTML 的结构本身就是为 CSS 服务的：

<h1 class="title">文章标题</h1>

前端用 CSS：

h1.title

爬虫用 CSS Selector：

soup.select("h1.title")

规则是完全一致的，只是用途不同。

---

🧰 三、使用 CSS Selector 的前提

CSS Selector 一般配合BeautifulSoup使用。

安装：pip install beautifulsoup4

基本用法：

from bs4 import BeautifulSoup soup = BeautifulSoup(html, "lxml") elements = soup.select("你的 CSS Selector")

返回值是一个列表。

---

🧪 四、CSS Selector 最常用的 8 种写法（爬虫必会）

① 按标签选择

h1 div a

soup.select("h1")

② 按 class 选择（最常用）

.title .article-item

soup.select(".title")

③ 按 id 选择

#content

soup.select("#content")

④ 标签 + class 组合

h1.title div.article

soup.select("h1.title")

⑤ 层级关系（子元素）

ul li a

soup.select("ul li a")

⑥ 直接子元素（>）

ul > li

⑦ 获取属性（BeautifulSoup 用法）

link = soup.select_one("a") href = link["href"]

⑧ 获取文本内容

text = soup.select_one("h1").get_text(strip=True)

🔎 五、实战示例：用 CSS Selector 解析文章页面

HTML 结构如下：

<div class="article"> <h1 class="title">Python 爬虫入门</h1> <p class="desc">这是文章简介</p> </div>

CSS Selector 提取：

title = soup.select_one(".title").text desc = soup.select_one(".desc").text

非常直观，新手极易上手。

---

⚔️ 六、CSS Selector vs XPath（核心对比）

这是很多爬虫新手最关心的问题。

对比点	CSS Selector	XPath
学习成本	低	中
可读性	很强	较强
语法复杂度	简单	较复杂
表达能力	中等	非常强
多条件组合	一般	非常强
向上查找父节点	不支持	支持
提取文本/属性	需要额外代码	原生支持
工程级复杂解析	不适合	非常适合

---

🧠 七、爬虫中到底该怎么选？

我给你一个非常实用的经验法则：

✅ 优先用 CSS Selector 的场景

• 页面结构简单

• class / id 非常清晰

• 文章页、列表页

• Demo / 教学 / 小项目

• 新手阶段

✅ 必须用 XPath 的场景

• HTML 层级复杂

• 需要多条件过滤

• 需要向上/向兄弟节点查找

• 列表结构不固定

• 工程级爬虫

• 高稳定性要求

📌一句话总结：

简单页面用 CSS，复杂页面用 XPath。

---

🚨 八、CSS Selector 的常见坑（新手易踩）

---

❌ 1. class 是多个值，却当成单值用

<div class="item active">

你写：

.item.active

是对的
但写成：

[class="item"]

❌ 2. select 返回的是列表，却当成单个对象

soup.select(".item").text # ❌

正确写法：

soup.select_one(".item").text

或遍历列表。

---

❌ 3. 页面内容其实是 Ajax 加载的

HTML 中没有数据，CSS Selector 自然解析不到。

---

🧩 九、CSS Selector + XPath 如何配合使用？

在真实项目中，很多工程师会：

• 先用 CSS Selector 快速定位

• 遇到复杂结构再换 XPath

这并不冲突，而是互补。

你掌握两种方式，才算真正具备 HTML 解析能力。

---

✅ 总结

今天你系统掌握了：

• CSS Selector 是什么

• BeautifulSoup 中如何使用 CSS Selector

• CSS Selector 常用写法

• CSS Selector 与 XPath 的核心区别

• 不同场景下的选择策略

• 新手常见错误与避坑

从今天开始，你在解析 HTML 时，就不再只有一种思路，而是能灵活选择最合适的工具。

如果你在解析页面时遇到：

• XPath 写得很复杂

• CSS Selector 不知道怎么写

• 页面结构不固定

• 列表节点经常变化

• 解析结果不稳定

可以加我微信：cpseagogo，一起讨论网页解析和爬虫实现思路。