XPath和CSS都是在Web開發中重要的語言，用于定位HTML文檔中的元素。雖然兩種語言都是基于XML的，但它們有很多不同之處。

// 使用XPath選擇器查找所有'class'屬性為'test'的元素
//*[@class='test']
// 使用CSS選擇器查找所有'class'屬性為'test'的元素
[class='test']

首先，XPath是一個查詢語言，而CSS是一個樣式表語言。XPath是設計用于搜索XML文檔的元素和屬性，而CSS用于向HTML文檔添加樣式，如字體、顏色和布局。

// 使用XPath選擇器搜索所有p元素下class為'bold'的文本
// （// 表示搜索整個文檔）
// （text() 表示元素文本節點）
// （. 表示當前節點）
// （.. 表示父級節點）
// （@ 表示屬性節點）
// （[n] 表示索引，從1開始）
// （contains() 表示匹配包含某字符串的元素）
// （last() 表示選擇最后一個匹配的元素）
// （@* 表示選擇所有屬性節點）
// （//tbody[1] 表示選擇文檔中第一個tbody節點）
// （position() 表示當前元素在其同級元素中的位置）
// （preceding-sibling::* 表示當前節點前面的所有同級元素節點）
// （following-sibling::* 表示當前節點后面的所有同級元素節點）
// （/ 表示從根元素開始，選擇子代元素）
// （self::* 表示當前節點）
// （ancestor:: 表示祖先元素）
// （descendant:: 表示后代元素）
// （| 表示選擇多個條件的元素）
// 使用CSS選擇器搜索所有p元素下class為'bold'的文本
p.bold

其次，XPath和CSS在語法和使用方式上有所不同。XPath使用類似于屬性的路徑表達式來訪問文檔的節點，而CSS使用類似于類和ID選擇器的規則來訪問文檔的元素。

// 使用XPath選擇器搜索文檔中所有class包含'box'的元素
//*[contains(concat(' ', normalize-space(@class), ' '), ' box ')]
// 使用CSS選擇器搜索文檔中所有class包含'box'的元素
[class*='box']

最后，XPath比CSS具有更強大的功能和更廣泛的應用范圍。XPath可以執行更復雜的查詢，如按屬性、文本、位置、祖先/后代元素等條件搜索。因此，XPath在Web開發中被廣泛應用于自動化測試、Web爬蟲和數據挖掘等領域。

總之，XPath和CSS各有其優點和缺點，在實際開發和應用中需要根據具體需求和場景進行選擇和使用。