css提取页面元素唯一性_Scrapy css选择器提取数据！

Scrapy css选择器提取数据！

时间：2018-08-12 09:16作者：scrapy中文网阅读：

经过上面，咋们已经了解了scrapy打开页面的细节，那打开之后我们如何获取页面里面的内容？比如获取：http://lab.scrapy.cn 这个页面的标题？或是这个页面的某个段文字？还是类比，人类如何做的呢？肯定是用眼睛查找！同理scrapy也有眼睛，分别是：css选择器、xpath选择器、正则，这三双眼睛实现的功能都一样：万军从中直取上将，说白了就是查找的功能！有三双眼睛是为了让大家有更多的选择，下面的内容我们会分三讲分别介绍他们的使用，以后的话你随便宠幸一个就行，当然你要三个一起用也是可以的，也就是她们能联合伺候你，似不似很爽？

首先我们来说说css选择器；其实在上面的概述：《Scrapy css选择器提取数据》里面已经简单的说了一下，和scrapy相关的函数就这么三个而已：response.css("css表达式")、extract()、extract_first()。有变化的就是：css表达式的写法，这里我们就列举一些常见的表达式，虽然不能囊括100%的爬取任务，但可以很负责的说，至少可以囊括90%的爬取，这里小编会把常见的给诸位列举哈，诸位见类似的便可直接依葫芦画瓢使用了。按照HTML标签的结构可以分为：标签属性值提取、标签内容提取，我们分别介绍对应的情况；

一、标签属性值的提取

1、href的值URL的提取：这是最常见的，我们要进入下一页、或是打开内容页……都少不了URL值，如下面这段HTML，我们来提取一下里面的URL

1. 1
2. 2
3. 3
4. 4

这其实是我们爬虫实验室的分页，如果我们要爬取下一页，我们该如何提取URL呢？提取属性我们是用：“标签名::attr(属性名)”，比如我们要提取url表达式就是：a::attr(href)，要提取图片地址的表达式就是：img::attr(src)……以此类推，好了知道scrapy给我们提供的提取变了的工具，那我们就可以提取上面的URL了，有多种方式，首先我们可以直接：

response.css("a::attr(href)")

然后，我们调试一下，看是不是我们想要的结果，cmd输入：

scrapy shell lab.scrapy.cn

然后我们发现结果并非是我们想要的分页URL，而是页面中所有的URL：

Out[3]:

['http://lab.scrapyd.cn/',

'http://lab.scrapyd.cn/archives/57.html',

'http://lab.scrapyd.cn/tag/%E8%89%BA%E6%9C%AF/',

'http://lab.scrapyd.cn/tag/%E5%90%8D%E7%94%BB/',

……

'http://lab.scrapyd.cn/page/1/',

'http://lab.scrapyd.cn/page/2/',

……

'http://lab.scrapyd.cn/page/6/',

'http://lab.scrapyd.cn/page/2/',

'http://lab.scrapyd.cn/tag/%E4%BA%BA%E7%94%9F/',

……

'http://lab.scrapyd.cn/tag/%E5%90%8D%E7%94%BB/',

'http://lab.scrapyd.cn/tag/%E7%94%9F%E6%B4%BB/',

……

'http://lab.scrapyd.cn/']

这当然不是我们想要的，我们想要的只是分页的URL，那这要怎么办？那我们就需要限定一下我们URL的范围，最好的方法就是找到我们要提取目标最近的class或是id，可以看到这段代码中有个class="page-navigator"，那我们就可以这样来写：

response.css(".page-navigator a::attr(href)").extract()

当这样限定之后，我们发现这就成功提取了我们想要的URL，灰常的完美！随便解释哈上面的：.page-navigator，其中点代表class选择器，如果代码中是：id=“page-navigator”，那我们这里就要写成：“#page-navigator”，大家如果不清楚可以去这里看看：https://www.runoob.com/css/css-id-class.html；

再来一个提取标签属性的栗子，最常见的就是我们的图片地址，也就是要提取图片的src值，如下面网页：

中国传世名画

看官，此页面只为爬虫练习使用，都是残卷，若喜欢可以去找点高清版！

标签: 艺术, 名画

这个页面是我们爬虫实验室：http://lab.scrapyd.cn/archives/57.html的文章，我们要提取里面图片的地址供scrapy下载，有上面的基础就很简单了：首先找到隔img最近的class或id，可以看到有个：class="post-content"，于是我们可以这样写表达式：

response.css(".post-content img::attr(src)").extract()

调试的话自己试哈，经过这个表达式：".post-content img::attr(src)，可以看到已经成功提取出来：

Out[2]:

['http://lab.scrapyd.cn/usr/uploads/2018/02/3875934880.jpg',

'http://lab.scrapyd.cn/usr/uploads/2018/02/2269613152.jpg',

'http://lab.scrapyd.cn/usr/uploads/2018/02/2360992798.jpg',

'http://lab.scrapyd.cn/usr/uploads/2018/02/2239103416.jpg',

'http://lab.scrapyd.cn/usr/uploads/2018/02/4145232684.jpg']

好了上面便是提取标签属性的方法，利用的就是：标签名::attr(属性名)，关键点就是如何缩小范围！

二、标签内容的提取

设么是标签内容，比如：

scrapy中文网

scrapy中文网：www.scrapyd.cn

scrapy实验室：lab.scrapyd.cn

scrapy中文网

上面标签：p、div、h1里面的文字便是标签内容，那我们要如何提取呢？用到了scrapy给我提供的这么一个方法：“::text”，比如要提取上面p标签里面的内容，我们可以这样：

response.css("p::text").extract()

那接下来我们就演示哈如何提取scrapy中文网：http://www.scrapd.cn的title：

Scrapy 中文网

……

提取方式：

response.css("title::text").extract()

上面的这个栗子灰常简单，应为tittle标签是页面唯一的标签，所以在title前不用加什么限制，当你发现标签不唯一的时候，我们就需要缩小范围，原理和上面标签属性提取一样，要么找最近的class、要么找最近的id，然后最终缩小提取访问，这样就能让提取很准确，如下面这个例子：

scrapy中文网左边

scrapy中文网中部

scrapy中文网右侧

如果我们要提取第二个div里面的内容，我们肯定不能这样：

response.css("div::text").extract()

如果这样提取的话，我们肯定得不到正确的结果，我们还需要限制哈范围，找到最近的class=“center”，最终表达式如下：

response.css(".center::text").extract()

这样的话就能正确提取我们想要的内容；下面我们再介绍一个最常用的提取方式：含有嵌套标签文字的提取，HTML如下：

如果你因失去了太阳而流泪，那么你也将失去群星了。

If you shed tears when you miss the sun, you also miss the stars.

scrapy中文网(http://www.scrapyd.cn)整理

如果我们要提取class=“post-content”里面的所有文字，我们需要怎么办呢？显然上面的知识无法做到。这段文字是scrapy实验室：http://lab.scrapyd.cn/archives/28.html 里的文章，诸位可以scrapy shell进行验证结果，可以记住用下面的方式：

response.css(".post-content *::text").extract()

可以看到，“::tex“t前面有个“*”号，这是一个小技巧，一般人我都告诉他，学着点！好了，上面的一些常见的内容已经说了些；接下来我们来说一些比较复杂的表达式，大家根据情况使用：

3、CSS 高级用法(来源：菜鸟教程)：

CSS选择器用于选择你想要的元素的样式的模式。"CSS"列表示在CSS版本的属性定义(CSS1，CSS2，或对CSS3)。

选择器

示例

示例说明

CSS

.intro

选择所有class="intro"的元素

1

#firstname

选择所有id="firstname"的元素

1

*

选择所有元素

2

p

选择所有

元素

1

div,p

选择所有

元素和

元素

1

div p

选择

元素内的所有

元素

1

div>p

选择所有父级是

元素的

元素

2

div+p

选择所有紧接着

元素之后的

元素

2

[target]

选择所有带有target属性元素

2

[target=-blank]

选择所有使用target="-blank"的元素

2

[title~=flower]

选择标题属性包含单词"flower"的所有元素

2

[lang|=en]

选择一个lang属性的起始值="EN"的所有元素

2

a:link

选择所有未访问链接

1

a:visited

选择所有访问过的链接

1

a:active

选择活动链接

1

a:hover

选择鼠标在链接上面时

1

input:focus

选择具有焦点的输入元素

2

p:first-letter

选择每一个

元素的第一个字母

1

p:first-line

选择每一个

元素的第一行

1

p:first-child

指定只有当

元素是其父级的第一个子级的样式。

2

p:before

在每个

元素之前插入内容

2

p:after

在每个

元素之后插入内容

2

p:lang(it)

选择一个lang属性的起始值="it"的所有

元素

2

p~ul

选择p元素之后的每一个ul元素

3

a[src^="https"]

选择每一个src属性的值以"https"开头的元素

3

a[src$=".pdf"]

选择每一个src属性的值以".pdf"结尾的元素

3

a[src*="runoob"]

选择每一个src属性的值包含子字符串"runoob"的元素

3

p:first-of-type

选择每个p元素是其父级的第一个p元素

3

p:last-of-type

选择每个p元素是其父级的最后一个p元素

3

p:only-of-type

选择每个p元素是其父级的唯一p元素

3

p:only-child

选择每个p元素是其父级的唯一子元素

3

p:nth-child(2)

选择每个p元素是其父级的第二个子元素

3

p:nth-last-child(2)

选择每个p元素的是其父级的第二个子元素，从最后一个子项计数

3

p:nth-of-type(2)

选择每个p元素是其父级的第二个p元素

3

p:nth-last-of-type(2)

选择每个p元素的是其父级的第二个p元素，从最后一个子项计数

3

p:last-child

选择每个p元素是其父级的最后一个子级。

3

:root

选择文档的根元素

3

p:empty

选择每个没有任何子级的p元素(包括文本节点)

3

#news:target

选择当前活动的#news元素(包含该锚名称的点击的URL)

3

input:enabled

选择每一个已启用的输入元素

3

input:disabled

选择每一个禁用的输入元素

3

input:checked

选择每个选中的输入元素

3

:not(p)

选择每个并非p元素的元素

3

::selection

匹配元素中被用户选中或处于高亮状态的部分

3

:out-of-range

匹配值在指定区间之外的input元素

3

:in-range

匹配值在指定区间之内的input元素

3

:read-write

用于匹配可读及可写的元素

3

:read-only

用于匹配设置 "readonly"(只读) 属性的元素

3

:optional

用于匹配可选的输入元素

3

:required

用于匹配设置了 "required" 属性的元素

3

:valid

用于匹配输入值为合法的元素

3

:invalid

用于匹配输入值为非法的元素

3

申明：属于【Scrapy 中文网】原创文章，商业转载请联系作者获得授权，非商业转载请注明出处。

评论去哪里了？

由于搜狐畅言广告越来越丧心病狂，用它一个评论，半个网页都被它占领，感觉已经把灵魂出卖给了魔鬼！SO，为了息众怒小编只能暂且关闭评论，若您实在想找我说话，欢迎关注公众号，给我留言，么么哒！