本文详解如何使用 xpath 精确匹配具有 `class` 属性（且其值**不包含指定子字符串**，如 `"mobilewrapper"`）的元素，避免误选无 `class` 属性的节点，并给出可直接复用的表达式与实践要点。

在自动化测试（如 Selenium）、网页抓取（如 Scrapy、lxml）或浏览器开发者工具中，常需基于动态生成的 CSS 类名进行定位。例如，框架（如 Styled Components）会生成类似 styled__MobileWrapper-sc-mljlp8-0 jnegik 的类名，其中仅 MobileWrapper 是稳定可识别的语义部分，其余为哈希后缀，不可预测。

此时，若使用 //div[not(contains(@class, 'MobileWrapper'))]，看似合理，实则存在逻辑漏洞：该表达式会同时匹配两类 div：

• 类名中不含 "MobileWrapper" 的元素（符合预期）；
• 根本无 class 属性的 div 元素（不符合业务意图） —— 因为 contains(@class, ...) 在 @class 不存在时返回 false，not(false) 即 true。

✅ 正确解法是先确保 class 属性存在，再对其值做子字符串判断。推荐 XPath 表达式如下：

//div[@class and not(contains(@class, 'MobileWrapper'))]/div[@data-testid='product-container']

该表达式分步解析：

• //div[@class and not(contains(@class, 'MobileWrapper'))]：选取所有存在 class 属性且其值不包含 "MobileWrapper" 的 div 元素；
• /div[@data-testid='product-container']：在其子元素中精确查找 data-testid="product-container" 的 div。

? 对应你的 HTML 结构，此 XPath 将准确匹配：

• 外层第一个 下的全部 3 个 product-container；
• 内的全部 3 个 product-container；
  ❌ 而排

  

  除 内部的 3 个容器——完全符合需求。

  ⚠️ 注意事项：

  • contains(@class, 'MobileWrapper') 对大小写敏感，确保子字符串大小写一致；
  • 若 class 属性含多个空格分隔的类名（如 class="a MobileWrapper b"），该写法依然有效，因 contains() 作用于整个属性字符串；
  • 如需更严格的“完整单词匹配”（避免误匹配 NonMobileWrapper），应改用正则（XPath 2.0+ 支持 matches()）或预处理，但多数场景 contains() 已足够可靠；
  • 在 Selenium 中使用时，请确保 WebDriver 版本支持对应 XPath 版本（主流浏览器均兼容 XPath 1.0 的 contains() 和布尔逻辑）。

  总结：关键在于用 @class 作为存在性断言，再嵌套 not(contains(...)) 进行内容过滤——这是处理动态类名、实现“排除特定语义组件”的标准 XPath 范式。