1. Web抓取中的CSS基础概念
为了成功进行Web抓取，理解页面结构的HTML和CSS类是关键因素。理解页面元素如何通过CSS进行样式化和结构化，可以更准确地选择并提取所需数据。我们将探讨如何将CSS引入HTML，使用选择器以及style、class、id和name属性来操作Web页面的结构以进行抓取。
虽然CSS负责网页的样式，但对Web抓取来说，可以把CSS视为理解结构和选择元素的工具。接下来我们将看看CSS中对抓取非常重要的关键概念：
- 选择器 —— 指定特定HTML元素的规则。使用选择器有助于精确定位所需的数据。
-
class、id和name属性 —— 这些是独特的标识符，帮助我们区分不同的元素。在抓取时，这些属性尤为有用，因为它们可以帮助隔离目标元素，从而简化数据提取。
2. 将CSS引入HTML文档
CSS可以通过多种方式引入HTML。理解引入方式对导航元素并确定它们的样式和类非常重要，因为这将有助于隔离目标数据。
外部文件
CSS通常作为外部文件引入，可以通过HTML文档中的<link>标签在<head>部分看到。外部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选择器用于将样式应用于元素，但在Web抓取中，它们的主要作用是精确选择包含所需数据的元素。接下来我们来看看在Web抓取中可以使用的主要选择器类型。
主要选择器类型
标签选择器: 这种选择器选择所有特定标签的元素（例如<p>或<div>）。在Web抓取中，标签选择器对于从可能包含文本、图片及其他信息的标签中提取信息非常有用。
p {
color: blue;
}
类选择器: 这种选择器选择具有特定class属性值的元素。类通过在名称前加点号 (.) 表示。在Web抓取中，类特别有用，因为它们可以标识具有相同样式的元素，例如商品列表。
.price {
color: red;
}
.price {
color: red;
}
<p class="price">价格: $99</p>
ID选择器: 这种选择器选择具有唯一id的元素，用符号#表示。在Web抓取中，id对于选择独特的元素（如页面标题或按钮）尤其有用。
#product-title {
font-size: 24px;
}
#product-title {
font-size: 24px;
}
<h1 id="product-title">产品名称</h1>
属性选择器: 这些选择器通过特定属性（如name、type等）选择元素。在Web抓取中，属性选择器对于选择表单元素或特定字段（例如具有某些name的字段）非常有用。
input[name="email"] {
border: 2px solid blue;
}
组合选择器: 组合选择器允许通过组合多个条件更精确地选择元素。例如，.product-list .price 只选择product-list容器中的价格。
关于属性选择器和组合选择器的详细内容将在后续课程中介绍。
4. 属性 style、class、id 和 name
属性 style
属性 style 用于将内联样式添加到元素上，这可能为难以通过其他属性识别的元素提供独特特征。在Web抓取中，style可以作为额外的过滤器用于查找页面上的特定元素。
<p style="color: red; font-size: 18px;">这个文本有内联样式</p>
属性 class
属性 class 表示一组具有相同样式的元素，例如商品、价格或描述。在抓取中，class 有助于选择具有相同视觉结构的元素组，从而简化批量数据提取。
<p class="price">价格: $99</p>
<p class="price">价格: $89</p>
<p class="price">价格: $99</p>
<p class="price">价格: $89</p>
.price {
color: red;
}
属性 id
属性 id 对每个元素是唯一的，这使它成为提取独特数据的极其有价值的参考。例如，页面上的商品标题可能有唯一的id，可以用此标识符精确选择该标题。
<h1 id="main-title">产品名称</h1>
<h1 id="main-title">产品名称</h1>
#main-title {
font-size: 30px;
}
属性 name
属性 name 经常用于表单元素，可以用于精确选择输入字段，例如电子邮件或电话号码字段。在Web抓取中，name 在从表单中提取数据时特别有用。
<input type="text" name="username" placeholder="请输入用户名">
<input type="text" name="username" placeholder="请输入用户名">
input[name="username"] {
border: 1px solid #333;
}
5. 使用CSS和HTML的页面示例
以下是一个使用各种选择器和属性的HTML文档示例，用于突出和构建可能对Web抓取有用的元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用于Web抓取的页面示例</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>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用于Web抓取的页面示例</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>
#main-title {
font-size: 24px;
color: green;
}
input[name="username"] {
border: 1px solid #333;
padding: 5px;
}
GO TO FULL VERSION