1、優缺點比較

特性	CSS選擇器	XPath
語法復雜度	簡潔易讀	較為復雜
性能	通常更快	可能較慢
向上遍歷	不支持	支持（可選擇父元素）
文本內容選擇	有限支持	完全支持
索引選擇	支持（:nth-child）	支持（position()）
瀏覽器兼容性	優秀	良好
可讀性	高	中等

2、何時使用CSS選擇器

• 當需要簡潔易讀的選擇器時
• 當性能是關鍵考慮因素時
• 當只需要向下或橫向遍歷DOM時
• 當元素有良好的ID、類或屬性時

3、何時使用XPath

• 當需要基于文本內容選擇元素時
• 當需要向上遍歷DOM（選擇父元素）時
• 當需要復雜的條件邏輯時
• 當元素沒有唯一的ID或類時

4、選擇器對比示例

以下是一些常見場景下CSS選擇器和XPath的對比示例：

場景	CSS選擇器	XPath
按ID選擇	#username	//*[@id="username"]
按類選擇	.btn-primary	//*[@class="btn-primary"]
按屬性選擇	[data-testid="submit"]	//*[@data-testid="submit"]
按文本選擇	不直接支持	//button[text()="提交"]
包含文本	不直接支持	//div[contains(text(), "錯誤")]
父元素選擇	不直接支持	//input[@id="email"]/parent::div
第n個子元素	li:nth-child(3)	//li[position()=3]
多條件選擇	input[type="text"][required]	//input[@type="text" and @required]