如何使用 XPath 通过 CSS 类定位 HTML 元素？

使用 XPath 按 CSS 类定位元素

在 HTML 文档中，您可能需要根据 CSS 类来识别特定元素。 XPath 提供了强大的元素选择机制，包括按类搜索元素的能力。

用于 CSS 类搜索的 XPath 语法

通过元素来定位元素CSS 类，您可以使用以下 XPath 语法：

//*[contains(@class, 'class-name')]

替换'class-name' 与您要搜索的实际 CSS 类。例如，如果您有一个

<div>；对于类名为“Test”的元素，您可以使用以下 XPath 表达式：

//*[contains(@class, 'Test')]

示例

考虑以下 HTML 片段：

<div>

使用我们的 XPath 表达式，我们可以找到

<div>;元素：

• 通用搜索（所有元素）：

//*[contains(@class, 'Test')]

• 特定搜索（div element):

//div[contains(@class, 'Test')]

改进的选择器

为了增强选择器的准确性，我们可以使用以下修改版本：

• 空白处理：

//div[contains(concat(' ', normalize-space(@class), ' '), ' Test ')]

这确保在比较之前修剪类名称周围的空格字符。

• 精确的类名称匹配：

//div[contains(concat(' ', @class, ' '), ' Test ')]

此版本仅匹配 CSS 类完全匹配的元素匹配“Test”。

结论

XPath 提供了基于 CSS 类的强大元素选择机制。通过理解语法并应用适当的修改，您可以出于各种目的精确定位 HTML 文档中的元素，例如数据提取或自动化。