爬蟲Scrapy框架之css選擇器使用

css選擇器介紹

• 在css中選擇器是一種模式，用於選擇須要添加樣式的元素，css對html頁面中的元素實現一對一，一對多或者多對一的控制，都須要用到css選擇器，html頁面中的元素就是經過css選擇器進行控制的；

css選擇器的基本語法

• 類選擇器：元素的class屬性，好比class="box"表示選取class爲box的元素；

• ID選擇器：元素的id屬性，好比id="box"表示選取id爲box的元素；

• 元素選擇器：直接選擇文檔元素，好比p表示選擇全部的p元素，div表示選擇全部的div元素；

• 屬性選擇器：選擇具備某個屬性的元素，如*[title]表示選擇全部包含title屬性的元素、a[href]表示選擇全部帶有href屬性的a元素等；

• 後代選擇器：選擇包含元素後代的元素，如li a表示選取全部li 下全部a元素；

• 子元素選擇器：選擇做爲某元素子元素的元素，如h1 > strong表示選擇父元素爲h1 的全部 strong 元素；

• 相鄰兄弟選擇器：選擇緊接在另外一元素後的元素，且兩者有相同父元素，如h1 + p表示選擇緊接在 h1 元素以後的全部p元素；

scrapy 中的css使用方法

以a元素來舉例說明

• response.css('a')：返回的是selector對象；

• response.css('a').extract()：返回的是a標籤對象；

• response.css('a::text').extract_first()：返回的是第一個a標籤中文本的值；

• response.css('a::attr(href)').extract_first()：返回的是第一個a標籤中href屬性的值；

• response.css('a[href*=image]::attr(href)').extract()：返回全部a標籤中href屬性包含image的值；

• response.css('a[href*=image] img::attr(src)').extract()：返回全部a標籤下image標籤的src屬性；

表達式書寫方式	表達式意義
#box	選取id爲box的元素
.box	選取class爲box的元素
p	選擇全部 p 元素
div img	選取div下的img元素
div,img	選擇全部 div 元素和全部 img 元素
div#box	選取 id爲box的div元素
div>p	選擇父元素爲 div 元素的全部 p 元素
[title~=flower]	選擇 title 屬性包含單詞 "flower" 的全部元素
a[href="/page/2"]	選取href屬性爲/page/2的a元素
a[href^="/page"]	選取href屬性以/page開頭的a元素
a[href$=".png"]	選取href屬性以png結尾的a元素

• 上一節中咱們使用XPATH選擇器獲取了csdn中今日推薦的標題，如今咱們用CSS選擇器來試着獲取一下

# -*- coding: utf-8 -*-
import scrapy
class CsdnSpider(scrapy.Spider):
    name = 'csdn'
    allowed_domains = ['www.csdn.net']
    start_urls = ['http://www.csdn.net/']

    def parse(self, response):
       result = response.css('.company_list .company_name a::text').extract()
       for i in result:
           print(i)

• 咱們來看一下代碼的運行結果，看是否能獲取到咱們想要的信息；

獲取元素的跳轉連接和圖片地址

• 首先能夠使用css選擇器提取元素的跳轉連接和圖片的src地址，這裏須要用到urllib庫中的parse.urljoin()方法，用它來拼接獲取到的元素中的路徑，使之變爲絕對路徑； urljoin(baes，url[,allow_frafments])，其中參數base做爲基地址，與第二個參數爲相對路徑的url相結合，組成一個絕對URl地址，其中參數allow_fragments可根據本身的需求設置；

import scrapy
from urllib import parse
class DribbbleSpider(scrapy.Spider):
    name = 'dribbble'
    allowed_domains = ['dribbble.com']
    start_urls = ['http://dribbble.com/']
    def parse(self, response):
        a_href = response.css('.dribbble-shot .dribbble-over::attr(href)').extract_first("")
        href = parse.urljoin(response.url, a_href)
        print(a_href)
        print(href)

import scrapy
from urllib import parse
class DribbbleSpider(scrapy.Spider):
    name = 'dribbble'
    allowed_domains = ['dribbble.com']
    start_urls = ['http://dribbble.com/']
    def parse(self, response):
        image_src = response.css('img.enrique-image::attr(src)').extract_first("")
        src = parse.urljoin(response.url, image_src)
        print(image_src)
        print(src)

• 下載且保存圖片到本地

import scrapy
from urllib import parse
import requests
class DribbbleSpider(scrapy.Spider):
    name = 'dribbble'
    allowed_domains = ['dribbble.com']
    start_urls = ['http://dribbble.com/']
    def parse(self, response):
        image_src = response.css('img.enrique-image::attr(src)').extract_first("")
        src = parse.urljoin(response.url, image_src)
        ret = requests.get(src, stream=True)
        with open('./1.png', 'wb') as f:
            for block in ret.iter_content(chunk_size=1024):
                f.write(block)

如何快速獲取頁面中的元素

• 獲取xpath選擇器的元素：選擇標籤->鼠標右鍵->copy->Copy XPath；

• 獲取css選擇器的元素：能夠使用第三方插件Chrome的開發者調試工具獲取，須要下載CSS Select插件->而後直接選擇標籤元素；

參考：https://www.9xkd.com/user/plan-view.html?id=3866229787