1. 針對網路爬蟲的 CSS 基本概念
若要進行成功的網路爬蟲，理解 HTML 和 CSS 的結構非常重要。
瞭解網頁中的元素如何透過 CSS 被樣式化和結構化，可以更精準地選取所需的資料並提取出來。
現在就來看看如何將 CSS 與 HTML 結合使用、選擇器以及 style、class、id 和 name 等屬性，幫助我們處理網頁結構進行爬蟲。
CSS 設計主要用於設置網頁樣式，但對於網路爬蟲來說，我們可以把 CSS 當作一種理解結構和選擇元素的工具。以下是與爬蟲相關的重要 CSS 基本概念：
- 選擇器 —— 這些規則用於針對特定的 HTML 元素。選擇器的使用幫助你精確識別所需的資料。
-
class、id和name屬性 —— 它們是用來區分元素的唯一識別符。對於爬蟲來說，這些屬性特別有用，能夠幫助我們隔離所需的元素，從而更加方便的提取資料。
2. 將 CSS 連結到 HTML 文件
CSS 可以用多種方式連結至 HTML 文件。瞭解這些方法可以幫助你定位元素，並確定其樣式與類別，進而更輕鬆找到目標資料。
外部檔案
CSS 通常以外部檔案的形式連結，可以透過 HTML 文件的 <head> 區塊中的 <link> 標籤看到。外部 CSS 文件定義了整個網頁的樣式，包括識別符和類別，這對於爬蟲導航而言非常方便。
<head>
<link rel="stylesheet" href="styles.css">
</head>
內部樣式
有時候樣式會用 <style> 標籤直接在頁面內部定義。內部樣式通常出現在頁面的 <head> 部分，並能作為瞭解類別和識別符的線索，進一步幫助我們選取需要的元素。
<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 屬性的元素。類別的前面加上點號 (.) 表示。在爬蟲中，類別選擇器特別有用，因為它們可以用來選擇具有相同樣式的元素，例如商品列表。
.price {
color: red;
}
.price {
color: red;
}
<p class="price">價格: $99</p>
GO TO FULL VERSION