CSS和XPATH定位HTML元素

Xpath

xpath是XML Path的缩写,称为XML路径语言

• xpath是在XML文档中查找信息的一种语言，可用来在XML文档中对元素和属性进行搜索
• xpath使用路径表达式来选取XML文档中的节点或节点集

绝对路径和相对路径

绝对路径：
从根节点开始的，每层之间用/分隔的表达式
e.g.：/html/body/div
等价于：css表达式 html>body>div

相对路径：
就不是从根节点开始,任意位置开始,起始位置写//
e.g.：//div 定位绝对路径的div
css直接写div

相对路径后面可以继续跟节点
直接子节点表示//div/p ==css表达式：div > p，p是div的儿子
间接子节点表示//div//p==css表达式：div p，p是div的后代(儿子、孙子、曾孙…)

常用语法：

根据属性定位
//*[@id="id_value"]
//input[@name="username"]

文本定位,a标签中文本为value
//a[text()="value"]

包含用法
a标签中文本包含partial_value
//a[contains(text(),"partial_value")]
所有标签中name属性值包含partial_value
//*[contains(@name,"partial_value")]

属性值以什么开头
所有标签中href属性以http开头的元素
//*[start_with(@href,"http")]

逻辑运算
div标签中id属性值为id_value或者name属性值为name_value的标签
//div[@id="id_value" or @name="name_value"]
div标签中id属性值为id_value同时name属性为name_value
//div[@id="id_value"][@name="name_value"]
也可以把or换成and

index定位，index从1开始
div标签下第1个a标签
//div/a[1]
div标签下第1个标签
//div/*[1]

last()
div标签下倒数第2个a标签
//div/a[last()-1]

---

css selector

根据id定位
#id_value
根据class定位
.class_value
根据属性值定位
p[attribute="value"]
根据多个属性定位,and
p[attribute1="value1"][attribute2="value2"]
父节点定位子孙节点
A B
父节点定位子节点
A>B
定位A节点紧跟着的B节点
A+B
定位A节点后面的所有B节点
A~B

按照Index定位节点

:first-child
父节点的第一个子节点
div p:first-child
查询所有div下第一个p节点
既要满足第一个子节点，又要满足是p标签

:only-child
父节点只有一个子节点

:last-child
父节点中最后一个子节点

:nth-child(n)
父节点中第n个子节点

:nth-last-child(n)
父节点中倒数第n个子节点

:empty
没有子节点的节点

:not(x)
去非

餐厅练习小游戏:https://liushilive.github.io/css_xpath/