一、引言

最近剛好在學 Scrapy 框架。Scrapy 毋容置疑的強大。

但是有一點，就是它的選擇器語法實在是太難讓人上手了。畢竟在接觸 Scrapy 之前，我都是用 BeautifulSoup 進行選擇解析的，一下子讓我接觸 xpath 和 css 兩種選擇器語法，實在是難以接受。

當然，這篇部落格並不是講述 Scrapy 支援的這兩種風格的選擇器的語法的，而是提供一個小技巧幫助新手更加輕鬆的過渡的。

二、學習選擇器（Selectors）寫法的小技巧

我們可以使用 Chrome 自帶的開發工具來拷貝我們所需要的 xpath 或者 css 選擇器表示式。

舉個例子：

這裡我以我部落格的頭像為例進行 xpath 和 css 兩種風格的選擇器表示式的書寫

1. 開啟我的部落格，然後按 F12 進入開發者模式，點選小滑鼠影象，移動滑鼠到我的頭像，可以看到我的頭像已經變成藍色的底色，並且對應的 html 程式碼也已經標為藍色底色。

2. 在高亮的響應程式碼處右鍵，選擇 Copy Xpath，以下程式碼就會自動貼上到剪貼簿上：

//*[@id="blog_userface"]/a/img

讓我們來驗證下這個 xpath 是否真的可以找到該物件（這裡我們通過 scrapy shell 連結到我的部落格進行 response 物件的檢視）：

# 連線到我的部落格首頁
scrapy shell http://blog.csdn.net/u012814856
 


# 等待一段時間後輸入 xpath 表示式
 response.xpath('//*[@id="blog_userface"]/a/img')

# 輸出以下內容
[<Selector xpath='//*[@id="blog_userface"]/a/img' data='<img src="http://avatar.csdn.net/4/D/2/1'>]

成功了有沒有！太開心了！終於可以擺脫拼命思考 xpath 的日子了有沒有！！！

3. 同樣的，我們再來試下 css 的選擇器樣式，我們在剛才的地方右鍵，選擇 Copy selector：

#blog_userface > a > img
 

然後我們按照剛才的檢驗邏輯走一遍：

# 輸入 css 選擇器表示式
response.css('#blog_userface > a > img')

# 輸出以下內容
[<Selector xpath="descendant-or-self::*[@id = 'blog_userface']/a/img" data='<img src="http://avatar.csdn.net/4/D/2/1'>]

經過驗證，我已經確認以上這兩個按鈕可以替代我們去書寫 xpath 或者 css 的選擇器表示式了。

三、總結

這個方法主要用於新手，當新手對於兩種語法都不熟悉的時候，就可以使用這個方法來學習這兩種表示式的寫法。

另外，這個小技巧也確確實實大大減少了新手學習 Scrapy 的負擔。

Scrapy 還是要繼續學習

Good Luck !
：）