Web Scraper 高级用法——CSS 选择器的使用

一、定位 HTML 节点

HTML 是什么？它是一个网页的骨架，是最最基础的东西。比如说你现在看的这篇文章，其实就是一个网页，每一行字都是 HTML 里的一个 <p> 标签。

网页就是由一行一行的 HTML 标签垒起来的，所以我们用 Web Scraper 的 Selector 选择的元素，本质上都是 HTML 标签，都是一个一个的 HTML 节点。

使用 Web Scraper 的 Selector 自动选择元素时，有时候选的节点不准，抓不到数据，这时候就要我们手动调节 Selector 生成的代码。那么第一个问题就来了，如何在网页里定位我们需要的 HTML 节点？

我们按 F12 打开网页的调试面板时，调试面板左上角有个箭头，我们点击一下，等箭头变成蓝色时，移动到我们要抓取节点的位置，然后再点击一下，就会自动定位这个 HTML 节点的位置。

下面请我们的老朋友——豆瓣电影TOP250，来演示一下如何定位。比如说我们想定位《肖申克的救赎》的电影名字，按照上面的步骤走一遍流程，动图如下：

是不是非常的简单？借助这个小箭头，我们可以很轻松的定位 HTML 节点。

 

二、CSS 选择器

CSS 是个什么东西？先不要管它为什么叫 CSS，这不重要。我们只要关注 CSS 是干什么的就行了。

有一个非常形象的比喻：HTML 是骨架，CSS 是衣服。如果世界上只有 HTML，那网页就全是千篇一律的 word 文档了，只有加上 CSS 的修饰，才有现在绚丽多彩的网页。

CSS 干的活说起来也简单，比如说改个字号大小啊，加个背景颜色啊，加些网页特效啊，不过这些对于 Web Scraper 来说都不需要，因为 Web Scraper 是个爬虫工具，关注点是数据，而不是设计。