元素定位之Xpath和CSS的使用小知识

此篇来讲一下关于xpath定位和CSS定位的一些小知识

操作步骤：
① 浏览器点击F12进入开发者工具
② ctrl +F 调起查询搜索框

举个例子【百度首页可以自己尝试】，如果需要定位图片所示的元素：

1、xpath 定位：

绝对路径：html/body/div/div/div[3]/div/a
相对路径：//div[@class=‘mnav s-top-more-btn’]/a

2、CSS定位：

绝对路径：html>body>div>div>div:nth-child(3)>div>a
相对路径：.s-bri.c-font-normal.c-color-t

通过上面的实例，我来梳理一下注意点：

xpath

层 级 使 用 ：/
定 位 单 标 签 ：标签名[@属性名=‘属性值’]
定 位 多 标 签 ：标签名[@属性名=‘属性值’ and @属性名=‘属性值’ and @属性名=‘属性值’]
定位同级子元素：标签名[元素下标]
（需要注意xpath子级标签按名称划分，按相同标签名称取下标）

css

层 级 使 用 ：> 或者 空格
定位class元素：用 . 属性值 （如果属性值包含空格则需用 . 替代）
定位id属性值：用 #属性值
定位单标签：标签名[属性名=‘属性值’] . (与xpath相比不用加上@符号)
定位多标签：标签名[属性名=‘属性值’] [属性名=‘属性值’][属性名=‘属性值’]
定位同级子元素：标签名:nth-child(元素下标)
（注意css子级标签不按名称划分，按当前标签名称下标直接取值）