什么是 CSS 选择器？

Scrapeless Scraping Browser 显示可以通过 CSS 选择器查询的渲染公共页面 DOM 内容。

CSS 选择器是一种标识 HTML 或 XML 文档树中元素的模式。浏览器使用选择器来决定 CSS 规则的应用位置，而 JavaScript 和抓取库使用相同的语法查找元素以供读取或交互。

该 W3C 选择器规范 将选择器定义为匹配树中元素的模式。

CSS 选择器是如何工作的？

CSS 选择器测试元素名称、属性、状态和关系，直到找到匹配的节点。

CSS 选择器的主要类型是什么？

CSS 选择器范围从简单的属性测试到表达树关系的组合。

• 类型、ID 和类选择器。 匹配元素名称、一个 ID 值或一个类标记。
• 属性选择器。 匹配属性的存在或值，例如 data-product-id 或 aria-label.
• 组合器。 表达元素之间的后代、子元素和兄弟关系。
• 伪类。 通过状态或结构精炼匹配，例如 :first-child, :not(), 或 :has().
• 选择器列表。 用逗号连接备用模式，并返回列表中任何模式的匹配。

CSS 选择器如何在网页抓取中使用？

在网络爬虫中，CSS选择器定位输出模式中包含每个字段的节点。

产品卡选择器可能会识别每个记录容器，然后嵌套选择器读取每张卡片内的标题、价格、URL和可用性。将嵌套选择器范围限定在卡片内可以防止将一个记录的标题与另一个记录的价格配对。

浏览器方法 Document.querySelector() 返回第一个匹配元素，而querySelectorAll返回所有匹配项。爬虫库通常使用库特定的方法提供等效操作。

该 MDN选择器和组合器指南 将基本选择器、属性选择器、伪类和关系组合器分组为实用的语法参考。

您如何编写稳定的CSS选择器？

稳定的CSS选择器使用表达元素角色的最窄持久属性，而不是复制整个DOM路径。

1. 从记录容器或唯一的组件边界开始。
2. 当它们是稳定的时，优先使用语义ID、数据属性、名称和可访问性标签。
3. 避免生成的类标记和重复 :nth-child() 链，除非位置是数据契约的一部分。
4. 在多个代表性页面上测试选择器，包括缺失和可选模块。
5. 声称预期匹配计数并验证提取的值。

您如何从右到左读取CSS选择器？

浏览器或解析器将选择器与候选元素进行匹配，最右侧的复合选择器识别可能被返回的元素。在 .product-list > article[data-sku] h2, 结果是一个 h2。前面的部分限制了哪个标题符合条件：该标题必须位于具有 data-sku 属性的文章内部，而该文章必须是具有 product-list 类的元素的直接子元素。

从右到左阅读有助于将目标字段与其上下文分开。首先询问哪个节点应该提供值。然后添加最近的稳定记录容器，仅添加所需的祖先，以防止不相关的匹配。这会产生比从开发者工具复制的长路径更容易检查的选择器。

相同的习惯可以澄清失败。如果没有元素匹配，请首先测试最右边的部分，然后添加每个关系。如果匹配的元素过多，请检查记录范围是否缺失，或者一个类是否被导航、推荐和主要内容共享。

属性选择器应该如何使用？

属性选择器可以匹配HTML属性的存在或值。精确匹配对于稳定状态和语义标签非常有用，而前缀、后缀和子字符串匹配在属性包含可预测标记时可以提供帮助。每个部分匹配应该足够狭小，以便一个新的无关值无法在结果中隐蔽进入。

优先选择描述身份、角色或领域含义的属性。一个文档化的 data-sku, 表单名称、链接目标或可访问性属性可能比构建过程中生成的类更持久。然而，没有属性是自动永久的。确认其在多种页面类型、地区、登出状态和内容变体中的表现。

引用属性值是一个实用的默认设置，尤其是当值包含标点或空格时。当文本、URL或标识符在运行时组装成选择器时，请使用平台提供的选择器设施进行转义。原始字符串连接可能会创建无效选择器或选择与预期不同的节点。

伪类为选择添加了什么？

伪类表达的条件不是以简单元素、类或属性书写的。结构形式可以通过位置识别子元素，根据类型过滤元素，或排除已知状态。逻辑形式如 :is(), :where(), 和 :not() 可以分组备选项或在选择器引擎支持时移除不需要的匹配。

基于位置的伪类在提取时应谨慎。一个页面上的第三张卡片在插入促销后可能会成为第四张。仅当位置本身定义字段时，例如固定表格模式中的第一个单元格时，位置规则才合适。仅仅因为所需节点在开发过程中恰好占据该位置时使用则较弱。

支持在浏览器和解析器库之间存在差异，特别是对于较新的关系特性。检查实际选择器引擎的文档，并在项目中保持兼容性测试。当前浏览器接受的选择器并不能证明服务器端解析库将以相同方式评估它。

您如何使用CSS提取重复记录？

首先选择记录容器，而不是选择整个文档中的每个字段。对于每个容器，为标题、价格、链接、状态或其他字段运行相对选择器。这保持了值之间的关系，并防止第三个价格与第四个产品标题配对。

记录级提取还使可选字段可管理。一个产品卡可以省略评论计数，而不会影响邻近卡的值。映射可以为该字段返回一个空值，同时保留记录的其余部分并附加一个验证状态。

提取后，检查容器的数量和每个字段的基数。返回一个卡内两个节点的标题选择器可能同时匹配了一个可见标题和一个可访问性重复项。明确决定是否采取一个值、合并值，或标记记录以备审查。

你如何维护选择器库？

将选择器保持靠近字段定义，并根据意义而非页面外观命名它们。一个叫做的映射 productTitle 传达的信息比 largeBlueText. 包括预期的页面类型，选择器返回一个节点还是多个节点，以及缺失结果的含义。

使用表示已知页面变体的夹具或捕获片段。测试应验证提取的值和记录边界，而不仅仅是选择器返回某些内容。当标记发生变化时，比较失败的夹具与当前捕获，并更新最小的稳定锚点。

故意撤回选择器。如果两个布局共存，将每个布局路由到版本化映射，而不是构建一个包含许多不相关替代项的表达式。清晰的选择器版本使得能够衡量哪些模板仍然出现，并在源不再使用时删除过时的规则。

结论

CSS 选择器是一种紧凑的方式，用于匹配解析的文档树中的元素。对于网页抓取，最佳选择器是可读的、范围明确的、基于持久属性的，并且与预期的匹配计数和字段值进行核对。