如何获取具有多个CSS类的HTML元素

Question

我知道如何获取同一CSS类别的DIV列表，例如：

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

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

但如果一个div有多个类，怎么办，例如

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

那么xpath会是什么样子？

- seasong

---

也许使用 CSS 路径会更好。 - Naramsim

Answer 1

您要查找的表达式是：

您要查找的表达式是：

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

我强烈推荐使用XPath可视化工具，它可以帮助您轻松地调试XPath表达式。您可以在此处找到它：

http://xpathvisualizer.codeplex.com/

- Ioannis Karadimas

---

这种解决方案的一个小问题是，如果可能的类名是另一个类名的子字符串，它有可能会出现问题。例如，如果你还有一个叫做"class11"的类，它会错误地匹配到这个子字符串中的 "class1"。不过，这很容易避免，只要确保类名不包含彼此即可。 - Flynn1179

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

如果真的必要，您可以使用“contains(concat(' ', @class, ' '), ' class1 ')”等语句，但正如我所说，避免这种情况非常容易。 - Flynn1179

这对我有用！花了我很长时间才解决了这个问题！ - Sunwoo Yang

Answer 2

根据这个回答，它解释了为什么重要的是要确保所寻找的类名子字符串未包含在内，正确答案应该是：

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

- Vic Seedoubleyew

Answer 3

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

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

生成可用的XPath：

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

这与Flynn1179的回答非常相似。

- steveayre

Answer 4

我认为你要找的表达式是：

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

- rishi singh

Answer 5

你也可以这样做：

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

- HelpNeeder