Why does google-chrome-devtools identifies less number of elements through XPath then number of elements identified through CssSelector

问题

I am trying to identify the elements containing the reviews on this webpage using google-chrome-devtools.

Using the following xpath:

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

The number of elements identified are: 15

Snapshot:

Using the following css-selectors:

div.text.show-more__control

The number of elements identified are: 25

Snapshot:

So, why does google-chrome-devtools identifies less number of elements through XPath then number of elements identified through CssSelector

回答1:

The XPath is checking @class attribute values lexically for the string, text show-more__control.

The CSS expression is checking semantically for @class attribute values that indicate that the div should have both the text and the show-more__control styles.

There are 10 div elements that satisfy the CSS semantic selection criteria that fail the XPath lexical criteria because their @class lexically is

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

The usual workaround for testing @class is to pad and check each class separately:

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

This XPath returns 25 div elements, just like the CSS selector.

Note: Particularly tricky here is that clickable parts of the div/@class attribute value are not present in the static source, only in the dynamic properties on the div objects.

来源：https://stackoverflow.com/questions/55535678/why-does-google-chrome-devtools-identifies-less-number-of-elements-through-xpath