如何查詢多個類別名稱的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中文網其他相關文章！