「前端框架開發」在職進修、線上學習、共學教室

Mike的Python學院

關注

Mike Ku

Learn Code With Mike品牌創辦人

2022/01/15

掌握Scrapy框架重要的CSS定位元素方法(下)

Q: Scrapy如何利用CSS方法取得子元素值?

在實務上利用Scrapy框架開發Python網頁爬蟲時，並不是每次想要爬取的網頁元素(Element)都會有CSS樣式類別可以定位，這時候，就會需要透過上層的父元素往下定位子元素。

假設INSIDE硬塞的網路趨勢觀察網站－AI新聞( https://www.inside.com.tw/tag/ai )的文章標題<a>標籤沒有「js-auto_break_title」CSS樣式類別，而想要爬取<a>標籤的文字內容，該如何達成呢?

這時候，就會需要在Scrapy框架中利用CSS樣式類別先定位到<h3>標籤，接著，再取得其下的子元素<a>標籤，如下範例：

import scrapy

class InsideSpider(scrapy.Spider):

name = 'inside'

allowed_domains = ['www.inside.com.tw']

start_urls = ['https://www.inside.com.tw/tag/ai']

def parse(self, response):

titles = response.css("h3.post_title a::text").getall()

for title in titles:

print(title)

在範例中，利用「post_title」CSS樣式類別定位到<h3>標籤後，接著一個空白，加上<a>標籤，意思就是取得<h3>標籤下的所有<a>標籤，由於要取得其中的文字，所以加上「::text」。

Q: Scrapy如何利用CSS方法取得元素屬性值?

此外，在開發Python網頁爬蟲時，也有機會爬取元素的屬性值(Attribute)，舉例來說，最常見的就是<a>標籤的href屬性值(Attribute)，也就是文章的連結網址，這時候只需要將「::text」關鍵字，修改為「::attr(屬性名稱)」即可，如下範例：

import scrapy

class InsideSpider(scrapy.Spider):

name = 'inside'

allowed_domains = ['www.inside.com.tw']

start_urls = ['https://www.inside.com.tw/tag/ai']

def parse(self, response):

urls = response.css("a.js-auto_break_title::attr(href)").getall()

for url in urls:

print(url)

本文與掌握Scrapy框架重要的CSS定位元素方法(上)搭配實際的網站，示範Scrapy框架利用css()方法(Method)來定位網頁元素的基本用法，重點摘要如下：

1.取得單一元素值呼叫get()方法(Method)

2.取得多個元素值呼叫getall()方法(Method)

3.取得文字內容，加上「::text」關鍵字

4.取得屬性值則加上「::attr(屬性名稱)」關鍵字

希望對於想要學習Scrapy框架的朋友有所幫助。

如果想要學習更多的Python應用教學，歡迎前往Learn Code With Mike( https://www.learncodewithmike.com/2021/01/scrapy-css-selectors.html

)網站觀看更多精彩內容。

learncodewithmike.com

[Scrapy教學4]掌握Scrapy框架重要的CSS定位元素方法

2 0 367 0

拍手

留言

分享到：

Line

Facebook

複製連結

取消

熱門精選

職涯學習課程專文推薦

關注

104學習精靈

產品

1小時前

【免費報名 | 線上直播】加薪升遷你該這麼做，8年6次升遷經驗大公開 |人才邦 x 104學習精靈

🔥 考績不如預期？

🔥 升遷總是沒你的份？

🔥 2025年該怎麼幫自己職場跟薪資翻身呢？

你的年度考績剛出爐，結果卻不如預期？努力工作，卻總是錯過升遷機會？

如果你希望今年內成功加薪、突破升遷瓶頸，這場直播就是你的職場必修課！

📅日期：2025/3/19（三）

⏰時間：20:00 - 21:30（1 小時內容 + 30 分鐘 Q&A）

趕緊來報名：https://user266414.pse.is/78uh42

本次講座，人才邦與104學習精靈合作，由人才邦創辦人洪偉騰（Henry）與104會員分享。他擁有 8 年 6 次升遷的實戰經驗，在7000人的跨國公司，從基層工程師一路晉升至管理層，成功翻轉職涯，之後自行創業。他將親自分享如何讓主管「主動幫你升遷與加薪」的關鍵策略，讓你在 2025 年職場競爭中脫穎而出！

💡 這場直播，你將學到：

✅ 明明很努力，為何考績會不佳？掌握「提升職場評價」的方法，讓主管看到你！

✅ 為什麼升遷總是輪不到你？深入解析主管評估標準，讓你突破職場隱形天花板！

✅ 如何在 6 個月內創造升遷機會？讓主管「不升你不行」的 3 大策略！

✅ 如何談加薪，才不會被拒絕？精準說服技巧，讓加薪變得水到渠成！

✅ 職場成功範例分享！8年六次升遷的實戰經驗分享

✅ 限時專屬優惠！🎁

💡本次活動適合對象：

⚡ 考績不如預期，想知道如何提高未來升遷與加薪空間

⚡ 在公司努力多年，卻始終沒有升遷機會，想突破職場瓶頸

⚡ 2025 年想成功加薪或升遷，但不確定應該如何準備

⚡ 正在考慮轉職，但想在離開前爭取更好薪資或職位

💡 講師介紹：

講師：洪偉騰（Henry）人才邦創辦人

講師經驗：

🔥 曾任趨勢科技（Trend Micro）多項管理職，8 年內獲得 6 次升遷，在7000人的跨國企業中，從基層工程師一路晉升至研發經理、專案經理、業務經理、Technical PMM等職位。曾負責年營收30億台幣的產品專案。

🔥 2015年起推動【職場沒人教的事】，至今即將滿十周年，幫助上千名學員成功突破職場瓶頸，達成 15-30% 加薪或晉升管理職

🔥《加薪升遷必勝技》線上課程講師，學員實證有效的職涯提升方法

🔥 另一身分為商業顧問，協助企業營收成長。企業客戶公司年度業績YOY達 340%。

🔥交大台北校友會候補理事。

user266414.pse.is

【免費報名 | 線上直播】加薪升遷你該這麼做，8年6次升遷經驗大公開 |人才邦 x 104學習精靈｜104活動吧

1 0 63 0

拍手

留言

分享到：

Line

Facebook

複製連結

取消

104學習精靈精選課程

看更多課程

想提升職場競爭力？專業技能課程看起來👇

第一次就上手，前端工程新手指南

在現代科技領域中，前端工程師扮演著關鍵的角色，負責開發各式網頁應用程式，並解決各種技術挑戰，這門課程將幫助你了解前端工程師的世界，教你如何找尋自己的職涯方向，準備面試等。課程將由專業的104 Alex老師帶領，提供實際的指導和支持，讓學員能夠快速成長為一名優秀的前端工程師！

緯育TibaMe

Let’s Vue! 前端開發入門到實戰

如果Angular或React對你來說太複雜，操作起來不夠靈活，那你真應該來學習超易上手的Vue！2018年Vue.js於Github的星星數完美展現它的熱門度；想成為前端工程師的您，快跟著長期深更在資訊領域的Nat老師，投入Vue.js的保證值回票價！

緯育TibaMe

全端工程師必修-Python迅速開發網站實戰

在本門課程中，將以社群部落格平台為範例，利用 Flask 框架來開發網站平台，並使用 Flask 擴充套件來建置會員系統、具有安全機制的驗證表單、加密使用者密碼、處理使用者上傳的檔案等等功能，讓您可以快速的學習Python網站開發所需的技能並能夠建置出自己的網站平台。

緯育TibaMe

成為前端工程師｜JavaScript 入門：帶你逐步培養網頁開發技能

從「網頁開發基礎知識」、「JavaScript 語法概念」開始入門，並透過王寧疆老師鉅細靡遺的完整教學，讓你深入了解 JavaScript 的物件、函式設計與應用，以及理解 JavaScript ES6 的版本差異，也經由實作練習累積經驗與穩紮你的基本功。

緯育TibaMe

成為前端工程師｜jQuery 入門密技，愉快打造互動式網頁不求人

在這門 jQuery 課程中，將從基本的滑動、淡入淡出效果開始，到進階的 CSS + jQuery 語法搭配，帶著你更好的掌握並應用各類語法，在動畫操作上也會讓你的網頁動態更精緻、多元。加上大量的實作案例，就是要讓大家能夠在學完這門課程後能輕鬆地使用 jQuery，做出屬於自己的網頁功能與效果！

緯育TibaMe

工程師救星-用Bootstrap速成響應式網頁開發

微軟MVP講師兼暢銷作家蔡文龍老師，教你用Bootstrap速成響應式網頁。從基礎元件、響應式排版，再結合JavaScript、jQuery增加互動性；獨家傳授「整合ASP.NET MVC後端」技術，完成既質感且功能完整的RWD動態網站管理系統。穿插多種案例實作，不管是購物網、企業網站，你都能搞定。

緯育TibaMe

學習精靈

09/14 00:00

developer.mozilla.org

前端框架簡介 - 學習該如何開發 Web | MDN

17 0

Mike的Python學院

關注

Mike Ku

Learn Code With Mike品牌創辦人

2022/01/15

掌握Scrapy框架重要的CSS定位元素方法(上)

想要開發Python網頁爬蟲的朋友，都會知道定位元素(Element)是一個非常重要的動作，Scrapy框架本身就有提供自己的定位元素(Element)方法(Method)，包含CSS與XPath兩種，本文就以INSIDE硬塞的網路趨勢觀察網站－AI新聞( https://www.inside.com.tw/tag/ai )為例，先來和大家分享在Scrapy框架中，如何利用CSS的定位元素(Element)方法(Method)，爬取想要的網頁內容。

Q: Scrapy如何利用CSS方法取得單一元素值?

CSS(Cascading Style Sheets)階層樣式表相信大家都不陌生，可以自訂樣式的類別來裝飾網頁，像是字體顏色、粗體等，所以在利用Scrapy框架開發網頁爬蟲時，也就能夠利用CSS樣式類別，來定位想要爬取的網頁元素(Element)。

前往INSIDE硬塞的網路趨勢觀察網站－AI新聞，在文章標題的地方，點擊滑鼠右鍵，選擇檢查，可以看到它的CSS樣式類別。假設想要在Scrapy框架中，利用CSS樣式類別來取得網頁的單一元素值，也就是單一文章的標題，就可以在spiders/inside.py的parse()方法(Method)中，使用css()方法(Method)來定位單一元素(Element)，如下範例：

import scrapy

class InsideSpider(scrapy.Spider):

name = 'inside'

allowed_domains = ['www.inside.com.tw']

start_urls = ['https://www.inside.com.tw/tag/ai']

def parse(self, response):

title = response.css("a.js-auto_break_title::text").get()

print(title)

接著，利用以下的指令執行inside網頁爬蟲：

$ scrapy crawl inside

以上範例，response就是Scrapy框架請求後的回應結果，接著，呼叫css()方法，傳入所要定位的HTML標籤<a>，點的後面加上它的CSS樣式類別，由於要取得元素(Element)的文字，所以在加上「::text」關鍵字，最後，呼get()方法(Method)取得單一元素(Element)。

Q: Scrapy如何利用CSS方法取得多個元素值?

而在Scrapy框架中，想要爬取網頁多個元素值，則呼叫getall()方法(Method)即可，如下範例：

import scrapy

class InsideSpider(scrapy.Spider):

name = 'inside'

allowed_domains = ['www.inside.com.tw']

start_urls = ['https://www.inside.com.tw/tag/ai']

def parse(self, response):

titles = response.css("a.js-auto_break_title::text").getall()

print(titles)

可以看到getall()方法(Method)回傳的是一個串列(List)，包含了所有樣式類別為「js-auto_break_title」的<a>標籤文字，接下來，利用迴圈即可取得其中的文章標題，如下範例：

import scrapy