04-元素定位-cssSelector

CSS（即层叠样式表Cascading Stylesheet） Selector来定位（locate）页面上的元素（Elements）

工作中总结：

在浏览器中 F12 , 右键选中的页面元素--审查元素，在Console中输入 jquery --回车键 看这个页面是否引入jquery,如果引入则可以用jquery语法 +cssSelector表达式调试元素 $("cssSelector表达式")[0]或 $("cssSelector表达式").click()

在 F12--elements页签--Ctrl+F---写入表达式 查看匹配的个数-----为1 则基本可以确定

写cssSelector表达式的方法：在页面先找到要定位的元素---看有属性能直接定位到不，比如：id、class等---不行就找最近的父类定---定不到再向上一层父类---总之找最近且能定住的父类直到匹配框个数为1为止，然后再向下定所需要的元素 定位中不要选以 ext、sweet开头的属性，通常是由javascript框架自动生成的id如,每次加载页面都会改变的

可以一层一层写 div > td > tr > span  

也可以跳  div span  如父类下就一个button  则可div button

出现多个同级标签就用div>div:nth-child(1)

元素不稳定就重新定位，换别的属性，或重新找父类

基础语法

E (如div标签)	标签选择器，匹配所有使用E标签的元素  E、F代表的是标签
E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔,  跳过中间一些标签
E > F	子元素选择器，匹配所有E元素的子元素F 直接的下一级
E + F	毗邻元素选择器，匹配紧随E元素之后的同级元素F （只匹配第一个）
E ~ F	同级元素选择器，匹配所有在E元素之后的同级F元素
.info   (.表示class)	选择器，匹配所有class属性中包含info的元素
#footer  (#表示id)	选择器，匹配所有id属性等于footer的元素
E[att='val']	属性att的值为val的E元素 （区分大小写）span[class="ui-tg-text"]
E[att^='val']	属性att的值以val开头的E元素 （区分大小写）
E[att$='val']	属性att的值以val结尾的E元素 （区分大小写）
E[att*='val']	属性att的值包含val的E元素 （区分大小写）
E[att1='v1'][att2*='v2']	属性att1的值为v1，att2的值包含v2 （区分大小写）多属性选择器
div>div:nth-child(1) input:nth-of-type(4)区别	div>td:nth-child(1)  匹配div下第一个td子节点 div>td:first-child   div>td:last-child  div#radio>input:nth-of-type(4) 匹配所有div下第四个input子节点

 

基础语法例子：

#input 选择id为input的节点

.Volvo 选择class为Volvo的节点

div#radio>input 选择id为radio的div下的所有的input节点

div#radio input 选择id为radio的div下的所有的子孙后代input节点

div#radio>input:nth-of-type(4) 选择id为radio的div下的第4个input节点

div#radio>:nth-child(1) 匹配所有id为radio的div下的第1个子节点（必须为直接子节点）

div#radio>input:nth-of-type(4)+label 匹配所有id为radio的div下的第4个input节点之后挨着的label节点

div#radio>input:nth-of-type(4)~labe 选择id为radio的div下的第4个input节点之后的所有label节点

input.Vovlo[name='identity'] 选择class为.Volvo并且name为identity的input节点

input[name='identity'][type='radio']:nth-of-type(1) 选择name为identity且type为radio的第1个input节点

input[name^='ident'] 选择以ident开头的name属性的所有input节点

input[name$='entity'] 选择以'entity'结尾的name属性的所有input节点

input[name*='enti'] 选择包含'enti'的name属性的所有input节点

<abbr>Abc<abbr/>  css=abbr[title="Abc"]

 如果class里带的空格，用.来代替空格如： <button class="x-btn-text  module_picker_icon">...   可以这样写：

css=button.x-btn-text.module_picker_icon

 但是在实际应该中，如果有元素固定id的，可以直接用id 定位，没有固定id的，通常是由javascript框架自动生成的id如,每次加载页面都会改变的 ext、sweet开头的属性不固定