问题
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