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] |