1、Xpath定位

表达式 描述
/ 根节点
/ / 相对路径
. 当前路径
.. 返回上层
@ 选取属性

实例:

html/head/div
/html/div/
//div
//div/./.. 
//div[@name]  根据属性名定位
//div[@name='taoge']  根据属性名和属性值定位
//div[@name='taoge']/div[1]  定位第1个
//div[@name='taoge']/div[last()]  定位最后一个
//div[@name='taoge']/div[last()-1]  定位倒数第2个
//div[@name='taoge']/div[position()=5]  定位第5个
//div[@name='taoge']/div[position()>=5]  定位到大于等于第5个的
//span[i=1000]  根据标签内的值定位如:<i>1000</i>
//span[i>1000]  

通配符

通配符 描述
* 匹配任何元素节点
@* 匹配任何属性节点
node() 匹配任何类型的节点
//*  定位所有节点
/*   定位最外层节点
//tital[@*]  定位所有带有tital的节点元素
//*[@*]  定位所有标签中有属性的如: <link href="www.baidu.com"></link> 不是:<i></i>
//html/node()   只定位html的子标签一层,node()只代表任意一个节点
//html/node()/meta  与 //html/*/meta  定位的一样
//meta | //link  定位meta或者link节点放到一个集合中
(//textarea | //div)[@id='wrapper']
//*[text()='taoge']  定位标签之间的文本内容如:<i>taoge</i>

//*[starts-with(@name,"abc")]  定位属性name的值以abc开头的节点如:<div name="abcdefgh"></div>

//*[contains(@name,"cde")]  定位属性name的值包含abc的节点如:<div name="abcdefgh"></div>

//*[@name='taoge' and @class='xiaohong']  用户两个属性和值来定位节点

2、CSS选择器(优先使用)

.taoge  用类名来定位节点如:<div class="taoge"></div>
#taoge  用id名来定位节点如:<div id="taoge"></div>
*   定位所有节点
div   用标签节点p来定位如:<div></div>

div,link 定位div或者link节点放到一个集合中

div a   定位到div节点下所有的a节点,包括子节点、孙节点、重孙节点

div>a   只定位到div节点下子节点a

div+link  定位到div节点下面的link节点,div和link是同胞节点

[id]  定位到所有id属性的标签
[id='taoge']  用id名来定位节点如:<div id="taoge"></div>

[class]  定位到所有class属性的标签
[class='taoge']  用class名来定位节点如:<div class="taoge"></div>
[class~='taoge']  用class名中包含taoge来定位节点如:<div class="taoge xiaohong"></div>

[type]  定位到所有type属性的标签  <div type="taoge"></div>
[type='taoge']  用type属性值来定位节点如:<div type="taoge"></div>

[name|='taoge']  定位name属性值以taoge开头如:<div name="taoge-ceshi"></div>

div[src^="http:"]  定位src属性值前缀是http:的如:<div src="http://www.taoge.js"><div>
div[src$="js"]  定位src属性值后缀是js的如:<div src="http://www.taoge.js"><div>
div[src*="taoge"]  定位src属性值包含taoge的如:<div src="http://www.taoge.js"><div>

p:only-child  定位子节点只有p节点
div:only-child  定位子节点只有div节点

div>p:nth-child(2)  定位div的第二个子节点p
div>a:nth-child(2)  定位div的第二个子节点a

div>*:nth-last-child(3)  定位div的倒数第三个节点

:empty  定位所有没有子节点的节点
div:empty  定位所有没有子节点的div节点

#taoge:target  定位当前活动的#taoge节点

input:enabled  定位所有开启的input节点
input:disabled  定位所有禁用的input节点

input:checked  定位所有选中的input节点

:not(p)  定位所有不是p的节点

a.taoge:nth-child(2)  定位所有a节点包含类名taoge的第二个节点如:
<a class="xiaolv"></a>
<a class="taoge"></a>
<a class="xiaolan"></a>

Logo

一站式 AI 云服务平台

更多推荐