CssSelector定位分享

cssSelector定位
一.为什么使用cssSelector定位元素？
目前针对一些常规定位方式有：By.id、、By.LinkTest(针对<a>标签)、By.ClassName 针对不太好定位的，比如：没有id、name、class的定位方式，或者说id、name、class的value值显示重复，不太方便一下写出定位方式，这样可以考虑下其它定位方式。

以下主要介绍cssSelector如何解决id、name、class的value值显示重复的定位方式。

二.基础语法
三.css常用的定位方式介绍
1.E代表的是标签；
2.E>F：F也是代表的标签，称为子代元素，F是E的子代元素，说通俗一点F是E的儿子
关系，F紧跟着E后面的第一个元素，直接的下一级；
3. E F：隔着多层标签，称为后代元素。

通俗点说祖宗辈关系，例如爷爷和孙子关系；
4.E+F：匹配紧随E元素之后的同级元素F（只匹配第一个），称为毗邻元素选择器。

通俗
点解释E是大哥，后面有多个弟弟，只取它最近一个弟弟F；
5. E ~ F：同级标签，称为同级元素选择器。

通俗称为兄弟关系，例如哥哥和弟弟关系；
6.E[att='val']：E代表标签，att代表属性，val指属性的值；
7.E[att1='v1'][att2*='v2']:多属性选择器，针对一个标签有多个属性，做并且的关系同时满
足条件；
class：点代表class；
9.#footer id：#号代表id；
10.ele:nth-of-type(n)是指其父元素下第n个ele元素。

例如：同一级下有10个div标签，那
么只需要定位其中6个div，这时代码可以这样写：div:nth-of-type(6)，括号中的数据代表索引查找第n个元素；
四．cssSelector常用定位方式的案例
1.例如这样一段html代码的网页
<div class="formdiv">
<form name="fnfn">
<input name="username" type="text"></input>
<input name="password" type="text"></input>
<input name="continue" type="button"></input>
<input name="cancel" type="button"></input>
<input value="SYS123456" name="vid" type="text">
<input value="ks10cf6d6" name="cid" type="text"> </form>
<div class="subdiv">
<ul id="recordlist">
<p>Heading</p>
<li>Cat</li>
<li>Dog</li>
<li>Car</li>
<li>Goat</li>
</ul>
</div>
</div>
2.匹配示例：
3.针对特殊标签定位方式：
a).如果class里带的空格，用.来代替空格如：
<button class="x-btn-text module_picker_icon">...
可以这样写：
css=button.x-btn-text.module_picker_icon
b）.如果你想定位一个显示OK的Button，但页面上有几个Button，id是自动生成的，class是一样的，我又想用一个简单点的CSS locator的时候，
<button id="ext-eng-1026" class="x-right-button">OK</button>
<button id="ext-eng-1027" class="x-right-button">Cancel</button>
可以这样写：
css=button.x-right-button:contains("OK")
:contains是个Pseudo-class，用冒号开头，括号里是内容。

Pseudo-classes是CSS提供的伪类，用来访问页面上DOM tree之外的信息，还有Pseudo-elements 用来最精准的定位页面上的某一行文字，甚至某一行文字的第一个字母。

这个得具体研究一下css3 selector文档的Chapter 6.6 Pseudo-classes 和 Chapter 7 Pseudo-elements
4.综上所述，就是:
有固定id的用id selector，
没有固定id的用css selector。

Pseudo-selements ：contains（）很好用。

会了这几下子，基本上定位就不成问题了。