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 文件定义了整页的样式，包括标识符和类，这使得抓取时的导航更容易。
HTML
<head>
<link rel="stylesheet" href="styles.css">
</head>
内部样式
有时样式也可以通过 <style> 标签在页面内定义。内部样式可以在页面的 <head> 部分找到，并可作为理解类和标识符的提示，以选择所需元素。
HTML
<head>
<style>
.price {
color: red;
}
</style>
</head>
内联样式（属性 style）
内联样式直接存在于 HTML 标签中，并仅影响特定元素。style 属性通常也包含一些独特的属性，可以用于识别目标数据。
HTML
<p style="color: red; font-size: 18px;">具有内联样式的文本</p>
HTML
<p style="color: red; font-size: 18px;">具有内联样式的文本</p>
3. CSS 中的选择器
CSS 中的选择器用于将样式应用于元素，但在网页抓取中，它们的主要用途是 精确选择包含所需数据的元素。让我们看看一些网页抓取中可以使用的主要选择器类型。
主要选择器类型
标签选择器: 这种选择器选择所有具有特定标签的元素（比如 <p> 或 <div>）。在网页抓取中，标签选择器对于从可能包含文本、图片和其他信息的标签中提取信息很有用。
类选择器: 这种选择器选择具有特定 class 属性值的元素。类前面用点号 (.) 标识。在网页抓取中，类特别有用，因为它们可以识别具有相同样式的元素，比如商品清单。
CSS
.price {
color: red;
}
CSS
.price {
color: red;
}
HTML
<p class="price">价格: $99</p>
标识符选择器 (ID): 这种选择器选择具有唯一 id 属性的元素。ID 用符号 # 标识。在网页抓取中，id 特别有用来选择唯一元素，比如页面上的标题或按钮。
CSS
#product-title {
font-size: 24px;
}
HTML
<h1 id="product-title">产品名称</h1>
属性选择器: 这些选择器根据特定属性（如 name、type 等）选择元素。在网页抓取中，属性选择器对于选择表单元素或特定字段（比如选择具有特定 name 的字段）很有用。
CSS
input[name="email"] {
border: 2px solid blue;
}
组合选择器: 这些选择器允许通过组合多个条件更精确地选择元素。例如，.product-list .price 仅选择 product-list 容器内的产品价格。
关于属性和组合选择器的更多详情将在后续讲座中详细介绍。
4. style、class、id 和 name 属性
style 属性
style 属性用于为元素添加内联样式，可以作为难以通过其他属性识别的元素的一个显著标志。在网页抓取中，它可以用作搜索页面中特定元素的另一个过滤器。
HTML
<p style="color: red; font-size: 18px;">这段文本由内联样式突出显示</p>
class 属性
class 属性标识具有相同样式的一组元素，比如商品、价格或描述。在抓取过程中，class 帮助选择具有相同可视结构的一组元素，从而简化大规模数据提取。
HTML
<p class="price">价格: $99</p>
<p class="price">价格: $89</p>
CSS
.price {
color: red;
}
id 属性
id 属性对每个元素都是唯一的，这使得其在提取唯一数据时非常有价值。例如，页面上商品的标题可能具有唯一 id，这个标识符可以被用来精确选择这个标题。
HTML
<h1 id="main-title">产品标题</h1>
CSS
#main-title {
font-size: 30px;
}
name 属性
name 属性常用于表单元素，可以用于精确选择输入字段，比如电子邮件或电话号码字段。在网页抓取中，name 在提取表单数据时很有用。
HTML
<input type="text" name="username" placeholder="输入用户名">
CSS
input[name="username"] {
border: 1px solid #333;
}
5. 使用 CSS 和 HTML 的页面示例
下面是一个 HTML 文档示例，其中使用了各种选择器和属性，以突出显示和结构化可能对网页抓取有用的元素。
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页抓取示例页面</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">本周产品</h1>
<p class="price">价格: $99</p>
<p class="description">这是一款具有出色特性的独特产品。</p>
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email">
<button type="submit">提交</button>
</form>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页抓取示例页面</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">本周产品</h1>
<p class="price">价格: $99</p>
<p class="description">这是一款具有出色特性的独特产品。</p>
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email">
<button type="submit">提交</button>
</form>
</body>
</html>
CSS
#main-title {
font-size: 24px;
color: green;
}
input[name="username"] {
border: 1px solid #333;
padding: 5px;
}
GO TO FULL VERSION