如何查询多个类名的div元素？

通过多个类名查询 Div 元素

在 web 元素有多个类名的场景下，使用 className 带空格的查询 -由于其功能有限，分隔值是不可行的。为了解决这个问题，有几种替代方法可用。

XPath 定位器：

XPath 允许在元素识别中使用多个条件。例如，以下表达式将匹配同时具有“value”和“test”类的元素：

//div[contains(@class, 'value') and contains(@class, 'test')]

CSS 选择器：

CSS 选择器提供了简洁且有效的替代方案。 “*”字符可用于匹配类名称中的任何值。

div[class*='value test']

如果指定类的顺序不重要，可以使用以下选择器：

div.value.test

自定义实现：

对于更复杂的查询，可以使用 JavaScript 或浏览器 API 进行自定义实现

示例：

考虑以下 HTML 结构：

<div class="value test"></div>
<div class="value test     "></div>
<div class="first value test last"></div>
<div class="test value"></div>

下表说明了不同的方法如何匹配这些元素:

Approach	Matching Elements
By.xpath("//div[@class='value test']")	1
By.xpath("//div[contains(@class, 'value test')]")	1, 2, 3
By.cssSelector("div[class='value test']")	1
By.cssSelector("div[class*='value test']")	1, 2, 3
By.cssSelector("div.value.test")	1, 2, 3, 4

通过针对特定元素识别需求选择最合适的方法，开发者可以有效地定位网页具有多个类名的元素。

以上是如何查询多个类名的div元素？的详细内容。更多信息请关注PHP中文网其他相关文章！