在我作为网络抓取专家 10 多年的时间里，很少有问题像“我应该使用 XPath 还是 CSS 选择器？”这样频繁地出现。
虽然没有单一的正确答案，但了解这两种元素选择技术之间的主要区别可以帮助您成为一名更有见识的从业者。
在这份综合指南中，我将从网络抓取的角度介绍您需要了解的有关 XPath 和 CSS 的所有内容：
- 起源与演变
- 语法和查询结构
- 能力和限制
- 性能考量
- 浏览器支持和标准
- 工具和库支持
我的目标是为开发人员和抓取者提供所需的见解，以确定何时对任何给定的 Web 提取作业使用 XPath 与 CSS。
准备好？ 让我们深入了解一下。
简史
XPath 最初是作为 XML 文档的查询语言，而 CSS 是为设计网页样式而设计的。
但随着时间的推移，它们成为满足自动化和抓取需求的强大元素选择工具。
XPath 的兴起
当 XML 在 1990 世纪 XNUMX 年代流行时，开发人员需要一种标准方法来定位复杂文档中的节点。
XPath 于 1999 年创建，旨在满足这一需求。
W3C 采用 XPath 作为 XSLT 和 XQuery 的关键组件。 Selenium 和 Scrapy 等其他软件集成了 XPath 支持，用于在渲染的网页上查找 HTML 元素。
通过将 DOM 建模为树，XPath 提供了强大的向上、向下和跨分支的遍历功能。
CSS 选择器变得无处不在
CSS 被设计为一种样式语言，包含基本选择器，如类型、ID 和类。
当 CSS 在 1990 世纪 XNUMX 年代成为 Web 开发不可或缺的一部分时，浏览器在优化 CSS 引擎方面投入了大量资金。
这种性能与普遍性相结合，使得 CSS 选择器对于网页抓取需求也很有吸引力。
像 Beautiful Soup 这样的抓取库使用 CSS 选择器作为快速定位策略。
因此，XPath 将 XML/HTML 文档作为一个整体来定位，而 CSS 则专注于设计可见 UI 元素的样式。
XPath 与 CSS 语法比较
让我们通过一些示例来解析 XPath 和 CSS 的语法。
考虑这个简单的页面：
<html>
<body>
<div>
<h2>Hello World</h2>
<p>This is a page</p>
</div>
<ul>
<li class="highlight"><span>List item 1</span></li>
<li>List item 2</li>
</ul>
</body>
</html>XPath 语法
DOM 被视为节点树。 XPath 使用路径表达式在节点之间遍历：
/html/body-选择<body>element//li[1]– 选择第一个<li>//h2/text()– 获取里面的文字<h2>//span/ancestor::ul- 提高到<ul>亲
一些值得注意的事情：
- 基于 DOM 位置的层次结构
- “//”进行全局搜索； “/”代表直接子代
[ ]对于谓词和函数，例如position()
CSS 选择器语法
CSS 使用简单的模式匹配语法来定位元素：
body- 选择<body>行李牌.highlight– 按班级名称选择ul > li- 匹配<li>内<ul>h2 + p– 相邻兄弟组合器
观察：
- 扁平化、无层次的模式
- 特殊字符如
>,+定义关系 - 没有办法遍历树
所以综上所述，XPath面向结构化文档查询，而CSS则提供简单的子字符串匹配。
XPath 与 CSS 功能比较
介绍完基础知识后，我们来比较一些关键的区别点：
DOM 遍历
- XPath既可以向上也可以向下遍历
- CSS选择器只允许向下遍历
这使得 XPath 更加灵活。
可读性
- CSS 选择器通常更具可读性和简洁性
- 长 XPath 字符串可能会变得复杂
所以对于更简单的查询，CSS 有优势。
性能
- 由于浏览器优化，CSS 选择器通常更快
- 但对于复杂的页面，差距就缩小了
在大多数情况下，速度是相当的。
部分匹配
- XPath 支持
contains()用于部分文本搜索 - CSS 缺乏原生支持，一些伪类仅适用于精确匹配
这里 XPath 有更好的功能。
语言支持
- XPath 可以查询 XML 和 HTML
- CSS 仅适用于 HTML/DOM
XPath 对于这两种数据格式都很有用。
刮痧时该用哪一个？
根据它们的功能，以下是关于何时默认使用 XPath 或 CSS 的一些建议：
当您需要时，首选 XPath：
- 向上遍历 DOM 树
- 部分搜索文本值
- 查询 XML（不仅仅是 HTML）
- 使用高级条件逻辑
当您需要时，首选 CSS 选择器：
- 编写简短的查询
- 利用浏览器优化
- 支持 Beautiful Soup 等库
- 定位可见的 UI 元素
但没有硬性规定—— 经验会告诉你什么时候更适合。
通常将两者一起使用是最佳方法。
浏览器支持和标准
所有现代浏览器都完全支持 XPath 和 CSS：
| 专栏 | 铬 | 火狐 | Safari |
|---|---|---|---|
| XPath的 | 有 | 有 | 有 |
| CSS 选择器 | 有 | 有 | 有 |
它们都是 Web 标准：
- XPath 是 W3C 推荐标准
- CSS 已由 W3C 标准化
因此，您可以依赖这两种技术出色的跨浏览器支持。
结论和关键要点
XPath 和 CSS 之间的选择更多地取决于它们的功能而不是性能。
我的建议是精通两者，并让用例指导您的选择。
对于简单的元素查找，为了可读性，首选 CSS。
当您需要强大的 DOM 遍历或部分匹配时，请使用 XPath。
如果可能的话，一起使用 XPath 和 CSS 以受益于它们的综合威力。
凭借从 Web 提取数据的经验，您自然会了解何时充分利用 XPath 与 CSS 选择器的潜力。
我希望本指南能够全面概述它们的主要优势、差异和应用程序，以满足您的网络抓取需求。
快乐提取！
