用 CSS 選擇器搜尋網頁上的元素

1. 回顧 CSS 選擇器

歡迎來到我們的世界，這裡的 HTML 頁面並不是靠打響指就能揭開祕密，而是靠精準的 CSS 選擇器。如果你認為 CSS 選擇器只用來美化頁面（呃，讓你網站不像是潦草學校筆記的話）， 那麼是時候打開你擷取資料的第三隻眼了。今天我們將了解 CSS 選擇器如何成為你搜尋和提取資料的最愛工具。

CSS 選擇器，就像是親切的小幫手，讓我們可以找到 HTML 元素。 它們幫助我們定義你想選擇的頁面元素。如果 HTML 是迷宮，CSS 選擇器就是那條幫你找到出路的紅線。

CSS 選擇器的範例

• 標籤: p — 選擇所有的 <p> 元素（段落）。
• 類別: .classname — 選擇所有擁有指定 class 的元素。
• ID: #idname — 選擇具備特定 ID 的元素。
• 組合: div > p — 選擇所有 <p>，這些都是<div> 的直接子元素。

2. 在 BeautifulSoup 中使用選擇器

再見，沒有 CSS 選擇器的單調生活吧！是時候來點新意了。 假設一個情景：你偶然發現一個網站，迫不及待想提取出來所有的名人名句， 為了在面試中吹噓一番。為此，我們會用到 select() 方法， 它正是和 CSS 選擇器一起工作的。

方法 select() 和 select_one()

方法 select() 回傳給你所有符合選擇器的元素列表。 而 select_one() 則會找到第一個滿足選擇器的元素， 就像搜尋引擎提供的第一個完美答案，而不是一堆沒用的連結。

假設你有一個包含名人名言的 HTML 頁面：

<div class="quote">
    <h2 class="author">普希金</h2>
    <p class="text">啊，普希金。</p>
    <a href="https://example.com" class="link">閱讀更多</a>
</div>
<div class="quote">
    <h2 class="author">列寧</h2>
    <p class="text">學習，學習，再學習。</p>
    <a href="https://example.com" class="link">閱讀更多</a>
</div>
<div class="quote">
    <h2 class="author">史達林</h2>
    <p class="text">有了人就有問題，沒了人就沒有問題。</p>
    <a href="https://example.com" class="link">閱讀更多</a>
</div>

這是我們可以提取它們的方法：

from bs4 import BeautifulSoup
import requests

# 獲取頁面的 HTML 碼
response = requests.get('http://quotes.toscrape.com/')
soup = BeautifulSoup(response.text, 'html.parser')

# 用 CSS 選擇器找到所有的名言
quotes = soup.select('.quote')

for quote in quotes:
    text = quote.select_one('.text').get_text()
    author = quote.select_one('.author').get_text()
    print(f'名言: {text}\\n作者: {author}\\n')

是不是超方便，就像魔法一樣？ class .quote 幫助我們抓到所有標示為名言的部分， 而 .text 和 .author 則是子元素， 我們從中抓取名言和作者的文字。

3. 使用 CSS 選擇器的搜尋範例

讓我們透過實例練習，讓你的聰明腦袋知道該怎麼處理那些帶有十個 class 的 div。 選擇器可以用更精確的方式找出頁面上的資料。你可以結合它們來獲取你真正需要的東西。

按類別和標籤使用選擇器

# 從菜單區塊找出所有連結
menu_links = soup.select('nav.menu a')

for link in menu_links:
    print(link['href'])

按 ID 使用選擇器

# 提取頁面的主標題
main_heading = soup.select_one('#main-heading')
print(main_heading.text)

結合選擇器

# 在高亮部分找到所有句子
highlighted_sentences = soup.select('.highlighted p')

for sentence in highlighted_sentences:
    print(sentence.text)

4. 錯誤和如何避免

作為網頁數據提取者，你的工作並不總像杯咖啡那麼簡單。 有時 CSS 選擇器可能不起作用，例如：

• 頁面有動態內容，所需元素是用 JavaScript 加載的。
• 你選擇的選擇器不存在（例如 class 或 ID 拼寫錯誤）。
• HTML 結構改變，導致你像是在恐怖片裡找東西一樣。

為了避免這些錯誤，確保你操作的是靜態版本的 HTML 文檔， 並仔細檢查選擇器的準確性。

實際應用

現在你已經有能力在實際數據提取項目中使用 CSS 選擇器。 這項技能可用於價格分析工具、新聞獲取，甚至追蹤網站更新。 這種方法的美妙之處在於，即使網站因 CSS 而改變外觀， 你的代碼仍然能正常運行，因為它依賴的是 HTML 結構，而不是樣式。

1

Опрос

認識 BeautifulSoup,  31 уровень,  4 лекция

недоступен

認識 BeautifulSoup

認識 BeautifulSoup

Открыть