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')] |
