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

最新推荐文章于 2025-12-17 22:10:16 发布

原创最新推荐文章于 2025-12-17 22:10:16 发布 · 926 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#爬虫

【投稿赢 iPhone 17】「我的第一个开源项目」故事征集：用代码换C位出道！ 10w+人浏览 1.8k人参与

在前一天我们学习了 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 返回的是列表，却当成单个对象

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

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，一起讨论网页解析和爬虫实现思路。