本文详解如何用 xpath 精确筛选 class 属性中**不含特定子串**（如 "mobilewrapper"）的元素，重点区分 `not(contains(@class, ...))` 与 `@class[not(contains(., ...))]` 的语义差异，并提供可直接复用的健壮表达式。
在 Web 自动化或爬虫开发中，常需基于动态生成的 CSS 类名进行精准定位。例如，React 或 Styled Components 生成的类名形如 styled__MobileWrapper-sc-mljlp8-0，其中仅 MobileWrapper 是稳定可识别的标识，其余部分随机变化。此时若想排除所有属于 MobileWrapper 容器内的元素，仅选取顶层或 DesktopWrapper 中的 div[data-testid="product-container"]，必须正确理解 XPath 对 @class 属性的匹配逻辑。
关键误区在于：
//div[not(contains(@class, 'MobileWrapper'))]
✅ 匹配所有 class 属性值不包含 'MobileWrapper' 的 div，
❌ 但同时也匹配所有根本没有 class 属性的 div（如示例中第一个
的子元素），导致结果“过度捕获”。
真正符合需求的写法是使用属性存在性 + 内容否定双重约束：
//div[@class and not(contains(@class, 'MobileWrapper'))]/div[@data-testid='product-container']
该表达式明确要求：
- @class 属性必须存在（@class）；
- 且其值不包含子串 'MobileWrapper'（not(contains(@class, 'MobileWrapper'))）；
- 最终定位到其下符合条件的 product-container 子元素。
✅ 正确匹配： 第一个 下全部 3 个 product-container（无 class）→ 不匹配（因缺少 @class）； DesktopWrapper 容器下的 3 个 product-container → 匹配（class 存在且不含 'MobileWrapper'）； MobileWrapper 容器下的 product-container → 不匹配（class 含 'MobileWrapper'）。
⚠️ 注意事项：
- 若需兼容无 class 属性的父容器（例如希望同时选中“无 class 的顶层容器”和“含 DesktopWrapper 的容器”），应改用 //div[not(@class) or not(contains(@class, 'MobileWrapper'))]/div[@data-testid='product-container']；
- contains() 对大小写敏感，确保子串与实际 HTML 中完全一致（如 'mobilewrapper' 不会匹配 'MobileWrapper'）；
- 多类名场景（如 class="wrapper MobileWrapper active"）仍可被 contains(@class, 'MobileWrapper') 正确识别，无需正则支持。
总结：XPath 中 @attr[condition] 表示“属性存在且满足条件”，而 not(contains(@attr, ...)) 仅否定内容，不隐含属性存在性。掌握这一区别，是编写高精度、低误报定位表达式的基石。
