xpath和css选择元素的不同

1.xpath选择元素

/ 表示直接子节点

//所有的子节点

//div[@id='hello']/../p      通过父节点查找元素

//div[@style]                 有style属性的div

//div[last()]        最后一个div元素

//div[position<=2]            前两个div元素

//p[@id='ui']/preceding-sibling::div         选择兄弟节点前所有的div元素

//p[@id='ui']/following-sibling::div          选择兄弟节点后所有的div元素

2.css选择元素

>表示直接子节点

div p 表示div下的所有p

hello>p,div       所有的p和所有的div

div+p               兄弟节点，紧挨着div下的p

div~p               兄弟节点div下所有的p

div[@style]       拥有style属性的所有div

div：nth-of-type(1)           元素中为div的第一个

div：nth-of-child(1)          子元素中所有元素的第一个