xpath和Css定位总结

Xpath转Css写法图

image.png

Xpath等价于css的一些写法

Xpath路径表达式	CSS选择器表达式
只通过绝对路径、标签定位
/html/body	html>body
/html/body/div/div[@class="bar"]	html>body>div>div.bar
/html//div	html div
/html//div/ul//li	html div>ul li
通过相对路径、标签、属性值定位
//div[@class="header"]	div.header
//div[@class="ush top_wrap"]	div.top_wrap
//div[@class="ush top_wrap"]/a[@class="more"]	div.top_wrap>a.more
通过标签、属性值、通配符定位
//*	*
//*[@class="header"]	[class="header"]或 .header
//*[@id="languagelist"]	[id="languagelist"]或 #languagelist
//*[@id="languagelist"]/li[2]	#languagelist>li:nth-child(2)
//div[@class="header"]//ul[@id="languagelist"]/*	div.header ul#languagelist >*
通过下标 或 属性定位
//@href	[href]
//a[@href]	a[href]
//div[@class="header"]//ul/li[last()]	div.header ul >li:last-child
//div[@class="ush top_wrap"]//ul[@id]/li[1]	div.top_wrap ul[id]>li:first-child
若干路径
//body | //ul	body , ul
//ul[@id="kwdTypeSelUl"] | //ul[@id="area_channel_layer_list"]	ul#kwdTypeSelUl , ul#area_channel_layer_list

Xpath一些特殊写法

表达式	描述
//title[@*]	选取所有带有属性的 title 元素
条件表达式and、or、not
//div[@id="zoomer" and @style="display:none;"]	找到id="zoomer"和style="display:none"的div元素
//div[@class="cresume" or @class="footer"]	找到class="cresume"或 "footer"的div元素
//*[@id="showguide" and not(@class="footer")]	找到id="showguide"且class != "footer"的任意元素
模糊匹配函数starts-with、contains
//*[starts-with(@id,"s")]	找到id开头为 s 的任意元素
//*[ends-with(@id,"s")]	找到id结尾为 s 的任意元素
//*[contains(text(),'注册')]	找到标签间文本包含 注册 的任意元素
定位函数position
//*[contains(@id,"languagelist")]/li[position()=3]	找到第三个 li
//*[contains(@id,"languagelist")]/li[position()<=2]	找到前两个 li

XPath 轴地位

定位方式	描述
ancestor	选取当前节点的所有先辈（父、祖父等）
ancestor-or-self	选取当前节点的所有先辈（父、祖父等）以及当前节点本身
child	选取当前节点的所有子元素【/可替代，略显多余】
descendant	选取当前节点的所有后代元素（子、孙等）【//可替代，略显多余】
descendant-or-self	选取当前节点的所有后代元素（子、孙等）以及当前节点本身
following	选取当前节点的结束标签之后的所有节点
following-sibling	选取当前节点之后的所有同级节点
parent	选取当前节点的父节点【../可替代，略显多余】
preceding	选取文档中当前节点的开始标签之前的所有节点
preceding-sibling	选取当前节点之前的所有同级节点

Xpath其他方式的实际例子

其他定位方式	是否有等价写法？
//*[contains(@class,"top_wrap")]/parent::div	//*[contains(@class,"top_wrap")]/..
//*[contains(@class,"content")]/div/child::div	//*[contains(@class,"content")]/div/div
//*[contains(@id,"userid")]/preceding-sibling::input	//*[contains(@id,"userid")]/../input[position()<=4]
//*[contains(@id,"userid")]/following-sibling::div	//*[contains(@id,"userid")]/../div[position()=2]
//*[contains(@class,"content")]/descendant::div	//*[contains(@class,"content")]//div

Css标签定位

h1	`//h1
div p	`//div//p
ul > li	//ul/li
ul > li > a	//ul/li/a
div > *	//div/*
:root	/
:root > body	/body

Css属性定位

CSS	xpath
标签属性定位
#id	//*[@id="id"]
.class	//*[@class="class"]
input[type="submit"]	//input[@type="submit"]
a#abc[for="xyz"]	//a[@id="abc"][@for="xyz"]
a[rel]	//a[@rel]
a[href^='/']	//a[starts-with(@href, '/')]
a[href$='pdf']	//a[ends-with(@href, '.pdf')]
a[href*='://']	//a[contains(@href, '://')]
a[rel~='help']	//a[contains(@rel, 'help')]