元素定位方法选用顺序
- 优先级最高：ID
- 优先级其次：name
- 优先级再次：CSS selector
- 优先级再次：Xpath
css定位与xpath定位比较
css
- css是配合html来工作，是一种匹配模式定位，而xpath是配合xml工作的，通过遍历定位，所以两者在设计上，css性能更优秀
- 语言简洁，明了，相对xpath
- 前端开发主要是使用css，不使用xpath，可以获取更多的技术支持
xpath
- Xpath可以通过元素文本来定位，而CSS Selector不能
- Xpath可以通过子节点来定位父节点，CSS Selector 不能
定位元素的注意事项
- 找到待定位元素的唯一属性
- 如果该元素没有唯一属性，则先找到能被唯一定位到的父元素/子元素/相邻元素，再使用“>”," “,”+"等进行辅助定位。
- 不要使用随机唯一属性定位
- 最重要的是多跟研发沟通，尽量把关键元素加上ID或者name，并减少不合理的页面元素，例如重复ID这样的事情最好不要发生。
css选择器
id 选择器
#id 选择器可以选中具有特定 id 的 HTML 元素CSS 中 id 选择器以 "#" 来定义。
#以下的样式规则应用于元素属性 id="para1":
para1
class 选择器
#class 选择器可以选中具有特定 class 属性的 HTML 元素
#在 CSS 中，class 选择器以 "."号 来定义，若有空格，亦可以"."来代替
#在以下的例子中，选择所有拥有 class 属性为 center 的 HTML 元素
.center
标签选择器
#标签选择器可以选中同类型的 html 标签元素在以下的例子中，将选择所有的 p 标签
p.
#另外，你可以将标签选择器与class选择器结合起来使用以下，会选择所有 class 属性为 re 的元素
p.re
分组选择器
#分组选择器可以选中一组 HTML 元素在 css 中，分组选择器以 “,” 来定义
#以下实例，会选择所有的 h1 标签、h2 标签、p 标签
h1,h2,p
属性选择器
#属性选择器选择具有特定属性的 HTML 元素
#以下实例将选择所有包含 title 属性的元素
[title]
#你也可以为属性指定值
#以下实例将选择所有 title 属性的元素
[title=“wa”]
#你也可以为元素指定标签
#以下实例将选择所有P标签 title 属性的元素
p[title=“wa”]
组合选择符
在 CSS3 中包含了四种组合方式:
● 后代选择器(以空格分隔)
● 子元素选择器(以大于号分隔）● 相邻兄弟选择器（以加号分隔）
● 后续兄弟选择器（以小波浪号分隔）
后代选择器
#后代选择器用于选取某元素的后代元素，无论层级有多深以下实例将选择 <div> 元素中所有的 p 元素:
div p
子元素选择器
#与后代选择器相比，子元素选择器只能选择其父元素的直接子元素以下实例选择了<div>元素中所有直接子元素
div>p
相邻兄弟选择器
#相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素以下实例选取了所有位于 <div> 元素后的第一个
div+p
后续兄弟选择器
#后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素
div~p
css下标选择
nth-child(n) #匹配属于其父元素的第 N 个子元素（不必指定标签类型）
div:nth-child(3) #选择第3个div元素
nth-last-child(n) #如字面意思：倒数第几个标签
first-child #第一个标签
last-child #最后一个标签