为什么 google-chrome-devtools 通过 XPath 识别的元素数量少于通过 CssSelector 识别的元素数量

Question

我正在尝试使用google-chrome-devtools 识别包含此webpage 上的评论 的元素。

使用以下xpath：

//div[@class='text show-more__control']

标识的元素数量为：15

快照：

使用以下css-selectors：

div.text.show-more__control

标识的元素数量为：25

快照：

那么，为什么 google-chrome-devtools 通过 XPath 识别的元素数量少于通过 CssSelector 识别的元素数量

Answer 1

XPath 正在为字符串 text show-more__control 词法检查 @class 属性值。

CSS 表达式在语义上检查 @class 属性值，这些值指示 div 应该同时具有 text 和 show-more__control 样式。

有 10 个满足 CSS 语义选择标准的 div 元素不符合 XPath 词法标准，因为它们的 @class 在词法上是

text show-more__control clickable
                       ^^^^^^^^^^

测试@class 的常用解决方法是分别填充和检查每个类：

//div[    contains(concat(' ',@class,' '), ' text ')
      and contains(concat(' ',@class,' '), ' show-more__control ') ]

这个 XPath 返回 25 个 div 元素，就像 CSS 选择器一样。

注意：这里特别棘手的是clickable 部分div/@class 属性值不存在于静态源中，仅存在于div 对象的动态属性中。