什么是 CSS 选择器？

选择器与文档树的关系

CSS 选择器根据名称、属性、关系和支持的条件匹配元素。 选择器语言规范 描述标准模式语言。

在样式表中，匹配的元素接收与规则相关联的声明。在提取脚本中，浏览器选择器 API 返回匹配的元素。同样的选择语言支持不同的操作，因为匹配和使用匹配是两个独立的步骤。

该 DOM 查询模型 定义了浏览器树和查询接口。选择器查询提供的树。它无法发现从未检索到的标记或执行能够创建丢失元素的应用程序。

该输入边界对抓取至关重要。复制自可见浏览器页面的选择器可能在初始 HTTP 响应中找不到任何内容，因为浏览器之后创建了记录。在将空匹配视为语法错误之前，请检查运行时使用的文档。

从实际源结构中选择选择器。看似描述性的类并不一定稳定，紧凑的选择器也不一定正确适用于您需要的字段。

元素、类、ID 和属性选择器

基本 CSS 选择器匹配元素类型、类标记、ID 或属性。当源公开一个可靠的实体或字段标识符时，这些模式非常有用。

选择器 a 匹配典型 HTML 文档中的锚元素。这样的类选择器 .product 匹配带有该类标记的元素；这并不意味着元素的完整类属性必须等于这个单词。这样的 ID 选择器 #catalog 匹配相关的 ID 值。

这样的属性选择器 a[href] 匹配携带 href 属性的锚。值测试可以进一步缩小选择。这些是语法示例，而不是针对特定目标网站验证过的选择器。

当源提供时，优先选择其含义符合字段的属性。产品身份属性可以比生成的布局类更好地表达记录。但仍需在代表性页面上验证该属性；一个听起来有语义的名称可能不一致。

不要假设一个 ID 使字段正确。尽管正常的作者期望，页面可能包含重复或意外的标记。在提取运行时中检查匹配计数和页面身份，而不是仅仅依赖字符串的明显唯一性。

组合器和记录范围查询

组合器描述匹配元素之间的关系。空格选择后代，而 > 需要直接子关系。兄弟组合器表示共享父元素的元素之间的关系。

对于一个说明性的产品卡树， .product a 可以匹配卡下的任何地方的锚，而 .product > a 需要直接在其下方的锚。新的包装器可以影响第二个选择器，而不会改变记录的可见含义。

有意选择关系。广泛的后代查询可以包括推荐链接，而过于精确的子路径可以编码与字段无关的演示细节。检查源以确定哪个关系识别预期的元素。

对于重复记录，首先定位每个记录容器，并在该上下文中查询其字段。不要独立收集页面上的所有标题和所有价格，然后按索引组合它们。缺失的字段或插入的模块可能导致这些列表不一致。

范围浏览器查询在涉及祖先关系或更复杂选择器的情况下同样值得测试。使用 :scope 当预期的关系需要对查询根的显式引用时。验证实际运行时中的表达，而不是假设每个解析器实现相同的行为。

伪类和结构条件

伪类为元素匹配添加条件，包括结构位置或关系。它们的价值取决于条件是否描述稳定的数据含义或临时的布局位置。

使用的选择器 :nth-child() 取决于元素在同级中的位置。添加一个新的兄弟可能会改变该位置。位置选择在固定文档中可能有效，但在成为持久的字段规则之前需要证据。

现代关系选择器，如 :has() 可以根据相对选择器条件匹配元素。这意味着，CSS永远无法选择与父元素相关的模式的说法是不准确的。支持仍然需要在查询运行的运行时进行检查。

标准 CSS 选择器并不提供元素文本的通用子字符串搜索。一些爬虫库添加了 :contains() 扩展或特殊文本定位器。这些接口与标准浏览器选择器语言是分开的。

保持扩展语法在您的实现笔记中可见。一个库接受的选择器可能会在浏览器查询 API 中引发错误。在在不同环境之间移动抓取工作流程时，将解析器兼容性视为一个真实的约束。

选择元素和读取字段值

CSS 选择返回元素在浏览器查询 API 中，而字段提取从这些元素中读取数据。文本、属性和 DOM 属性可以表示不同的值。

请将以下文本从英文翻译成中文。规则： 1. 仅输出翻译的文本——不需要解释，不需要额外的代码块。 2. 精确保留Markdown/HTML结构（标题、列表、链接、表格）。 3. 保持任何占位符令牌如@@CODEBLOCK_0@@或@@INLINECODE_0@@完全不变；绝不翻译、重排、合并或重新格式化它们。 4. 不要添加或删除```代码块，也不要将普通文本包裹在代码块中。 链接的href属性可能包含相对引用，而浏览器的对应属性可以暴露解析后的URL。决定字段合同所需的值，并在有助于解释结果时保留源引用。

文本的原始后代内容与呈现文本行为有所不同。隐藏元素、内联标记和空格可能会影响通过所选属性获得的值。故意进行规范化，并保持任务所需的限定条件的重要性。

规章： 1. 仅输出翻译文本——不解释，不添加额外的代码围栏。 2. 确切保留Markdown/HTML结构（标题、列表、链接、表格）。 3. 保持任何占位符令牌如@@CODEBLOCK_0@@或@@INLINECODE_0@@完全不变；绝不要翻译、重新排序、合并或重新格式化它们。 4. 不要添加或删除```代码围栏，正常文本也不要包裹在代码块中。 The querySelectorAll 结果行为 返回一个静态的匹配元素集合。它不会在后续页面更改发生时不断更新该集合。如果页面呈现更多记录，可能需要新的查询来检查更新后的树。

在接受字段之前检查匹配基数。单结果API可以悄然选择多个匹配中的第一个，而空结果则可能意味着缺少内容或错误的文档。验证应该决定实际适用的状态。

CSS选择器与XPath比较

CSS选择器和XPath都可以在文档树中定位内容，但它们提供不同的表达模型和返回行为。使用能清楚描述所需字段并在您的提取环境中有效的形式。

两种语言都不保证稳定的提取。与生成的包装路径相关的查询在任一语法中都可能会中断。运行时性能还取决于实现和工作负载，因此如果速度影响设计，请基准测试实际的提取任务。

规则： 1. 仅输出翻译后的文本——不做解释，不加额外的包装代码区。 2. 精确保留Markdown/HTML结构（标题、列表、链接、表格）。 3. 任何占位符标记，如@@CODEBLOCK_0@@或@@INLINECODE_0@@，须完全保持原样；绝不翻译、重新排序、合并或重新格式化它们。 4. 不添加或删除```代码区，也不将普通文本包裹在代码块中。 CSS 和 XPath 比较 提供实际背景。验证当前的支持，并避免在未检查的情况下将库扩展转移到浏览器选择器中。

设计可维护的选择器

一个可维护的选择器表达了一个已知字段在一个被识别的记录中，并且对缺失或模糊匹配有一个明确的规则。应该能够解释为什么选择器识别该数据。

检查代表性变体：折扣产品、无商品项目、替代页面模板，以及相关的空列表。如果一个选择器在一个页面上匹配销售价格，而在另一个页面上匹配单价，则查询需要更精确的合同。

保留被拒绝记录的证据。缺失匹配项的突然增加可能表明布局发生了变化；每条记录的多个匹配项可能表明出现了新的相关内容模块。区分这些结果，以便操作员可以更新正确的规则。

对于依赖JavaScript的页面， 无抓取代理浏览器 供应云执行描述在 代理浏览器文档浏览器创建文档环境；您的选择器和验证规则识别可接受的字段。

使用 Scrapeless定价 以获取当前执行成本。将维护页面识别和字段选择的工作包含在运营计划中，因为渲染服务无法决定您的业务任务所需的金额。

结论

CSS选择器通过它们的属性和关系匹配元素。可靠的抓取将该选择与记录边界、明确的值提取和缺失或多个匹配的验证相结合。

从实际文档和字段含义开始。更倾向于可以跨源变体测试的清晰选择器，并记录任何特定于运行时的语法。这种方法为您提供了一个提取规则，当页面发生变化时仍然可以理解。

参考文献

• 代理浏览器的渲染和执行
• Scrapeless代理浏览器
• CSS和XPath比较