本文详解如何使用 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']该表达式含义清晰：
- @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-* 等其他动态属性的模糊排除场景。
- ✅ 匹配