本文详解如何使用 xpath 精确筛选 class 属性中不包含特定子字符串（如 "mobilewrapper"）的元素，避免误选无 class 属性的节点，并提供可直接复用的表达式与实战注意事项。

在 Web 自动化或 HTML 解析场景中，常需基于动态生成的 class 名（如 styled__MobileWrapper-sc-mljlp8-0）进行条件定位。由于类名中仅部分（如 MobileWrapper）是稳定可识别的，而其余部分（如哈希后缀）每次构建可能变化，因此不能依赖完整 class 值匹配，而必须使用 contains(@class, 'MobileWrapper') 进行子字符串判断。

但一个常见误区是直接写成：

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

该表达式逻辑有缺陷：contains(@class, ...) 在 @class 属性不存在时返回 false，导致 not(false) → true，即所有没有 class 属性的

也会被选中——这正是你观察到“仍匹配全部 product-container”的根本原因。

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

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

该表达式含义清晰：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• @class：要求节点必须具有 class 属性（排除无 class 的 div）；
• not(contains(@class, 'MobileWrapper'))：在其 class 值中不包含 'MobileWrapper' 子串；
• 后续 /div[@data-testid='product-container'] 精准定位目标子元素。

? 对比验证（基于你的 HTML 结构）：

• ✅ 匹配顶层三个
  中的 product-container（它们父级 div 无 class）→ 不会被选中（因父级无 @class，不满足 @class and ... 条件）；
• ✅ 匹配
  内的 product-container（class 含 DesktopWrapper，不含 MobileWrapper）→ 会被选中；
• ❌ 排除
  内的所有 product-container → 正确过滤。

  ⚠️ 注意事项：

  • 若需匹配完全不带 class 属性的父容器下的目标元素（例如你想选最外层无 class 的
    下的 product-container），则需拆分为两个独立路径并用 | 合并：

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

  • contains() 区分大小写，确保子字符串大小写与实际 HTML 一致；
  • 多 class 值（如 class="a MobileWrapper b"）仍能被正确识别，因 contains() 作用于整个空格分隔的字符串。

  总结：精准控制 class 子字符串匹配的关键，在于显式约束属性存在性（@class）与内容否定逻辑（not(contains(...))）的组合，而非仅依赖 not(contains())。这一模式同样适用于 id、data-* 等其他动态属性的模糊排除场景。