如何获取具有多个 css 类的 html 元素

Posted 2023-03-15

【中文标题】如何获取具有多个 css 类的 html 元素

【英文标题】：How to get html elements with multiple css classes

【发布时间】：2011-04-22 07:35:32

【问题描述】：

我知道如何获取相同 css 类的 DIV 列表，例如

<div class="class1">1</div>
<div class="class1">2</div>

使用 xpath //div[@class='class1']

但是如果一个 div 有多个类，例如

<div class="class1 class2">1</div>

xpath 会是什么样子？

【问题讨论】：

也许使用 CSS 路径会更好

【参考方案1】：

您要查找的表达式是：

//div[contains(@class, 'class1') and contains(@class, 'class2')]

我强烈推荐 XPath 可视化工具，它可以帮助您轻松调试 xpath 表达式。可以在这里找到：

http://xpathvisualizer.codeplex.com/

【讨论】：

此解决方案的小问题是，如果可能的类名是另一个类名的子字符串，它可能会中断。例如，如果您还有“class11”，它会错误地匹配它，因为它包含“class1”。不过，这很容易避免，只要确保类名不包含彼此即可。

同意，但考虑到这里讨论的内容涉及扫描属性的字符串值，在 XPath 中，我不确定是否可以避免。

好吧，如果真的有必要，你可以做contains(concat(' ', @class, ' '), ' class1 ') 等，但正如我所说，很容易避免这样做。

这是为我做的！我花了很长时间才解决这个问题！

【参考方案2】：

根据this answer，这解释了为什么确保不包含正在查找的类名的子字符串很重要，正确答案应该是：

//div[contains(concat(' ', normalize-space(@class), ' '), ' class1 ')
    and contains(concat(' ', normalize-space(@class), ' '), ' class2 ')]

【参考方案3】：

有一个有用的 python 包叫做 cssselect。

从 cssselect 导入 CSSSelector CSSSelector('div.gallery').path

生成一个可用的 XPath：

descendant-or-self::div[@class and contains(concat(' ', normalize-space(@class), ' '), ' gallery ')]

这与 Flynn1179 的回答非常相似。

【参考方案4】：

我认为这是您正在寻找的表达方式

//div[starts-with(@class, "class1")]/text()

【参考方案5】：

你也可以这样做：

//div[contains-token(@class, 'class_one') and contains-token(@class, 'class_two')]