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

Question

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

使用以下xpath：

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

确定的要素数量为：15

快照：

使用以下css-selectors：

div.text.show-more__control

确定的要素数量为：25

快照：

那么，为什么google-chrome-devtools通过XPath确定较少数量的元素，然后通过CssSelector识别的元素数量

Answer 1

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

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

有10个div元素满足CSS语义选择标准，这些标准不符合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对象的动态属性中。