1. 網頁爬蟲的 CSS 基本概念
想要成功進行網頁爬蟲，理解網頁中 HTML 與 CSS class 的結構是個關鍵點。
理解頁面元素如何通過 CSS 被設計和結構化，可以幫助更準確地選取所需的數據並提取出來。我們來看看如何將 CSS 連結至 HTML 使用選擇器，以及 style、class、id 和 name 屬性在爬蟲中是如何幫助處理網頁結構的。
CSS 負責網頁的樣式設計，但對於網頁爬蟲，我們可以將 CSS 視為理解結構及選取元素的工具。以下是網頁爬蟲中一些重要的 CSS 概念：
- 選擇器 —— 指向特定 HTML 元素的規則。使用選擇器可以更精確地識別所需數據。
-
屬性
class,id, 和name—— 它們是用於區分及辨別元素的唯一標識。對於爬蟲來說，它們特別有用，能幫助我們 isolating 特定元素，從而簡化數據提取。
2. 將 CSS 連結到 HTML 文件
CSS 可以用多種方式連結到 HTML。理解這些方法有助於解析元素、確認它們的樣式以及 class，這會幫助我們 isolating 目標數據。
外部文件
CSS 通常作為外部文件連結到 HTML，可以在 HTML 文件的 <head> 部分通過 <link> 標籤看到。外部 CSS 文件定義了整個頁面的樣式，包括 ID 和 class，這能幫助爬蟲更好地導航。
<head>
<link rel="stylesheet" href="styles.css">
</head>
內部樣式
有時樣式可在頁面內部定義，通過 <style> 標籤。內部樣式可以在頁面的 <head> 部分找到，並用於理解 class 和 ID，這些可以幫助選取目標元素。
<head>
<style>
.price {
color: red;
}
</style>
</head>
內嵌樣式（屬性 style）
內嵌樣式直接位於 HTML 標籤中，僅影響當前元素。屬性 style 也經常包含一些獨特屬性，這在識別目標數據時非常有用。
<p style="color: red; font-size: 18px;">內嵌樣式文本</p>
<p style="color: red; font-size: 18px;">內嵌樣式文本</p>
3. CSS 的選擇器
CSS 內的選擇器是對元素應用樣式的工具，但對於網頁爬蟲來說，它的主要用途是 精確選取包含所需數據的元素。以下是幾種常見的選擇器類型，適用於網頁爬蟲。
基本選擇器類型
標籤選擇器: 此選擇器選取所有指定標籤名稱的元素（例如 <p> 或 <div>）。在網頁爬蟲中，標籤選擇器可用於提取具有文本、圖片等信息的標籤內容。
p {
color: blue;
}
class 選擇器: 此選擇器用於選取具有特定 class 屬性值的元素。class 是以點號 (.) 作為前綴。在網頁爬蟲中，class 特別有用，有助於識別具有相同樣式的元素，例如商品列表。
.price {
color: red;
}
.price {
color: red;
}
<p class="price">價格: $99</p>
ID 選擇器: 此選擇器選取擁有唯一 id 屬性的元素，以井號符號 # 為前綴。在網頁爬蟲中，id 很有用於選取唯一元素，例如頁面上的標題或按鈕。
GO TO FULL VERSION