CSS Selectors
前言
在刚学习UI自动化时，对于定位方式一窍不通，在使用插件辅助工具加上对定位方式的一些了解，算是磕磕绊绊用了起来，随着编写用例数量的增加，定位方式的稳定性也更加重要，只懂一些基本的定位知识已经不能够满足要求，百度搜索到的使用方法也大都看的云里雾里，因此花费些时间整理了下CSS和Xpath（后续补充）两种定位方法，发现还是有很多细节需要掌握（使用粗体标记），根据学到的自己对使用方法作了三种划分，当然这并不代表所有CSS定位方法，更多可参考文末链接学习。
1. 基本表示法
通配符：*
*使用*可以匹配到所有节点，即页面上的所有元素
元素：element
div直接使用元素名就可以匹配到所有此类型的元素，如div；若需要匹配多个元素，使用逗号隔开，如：
em,spanID：#id
#login根据该元素的ID属性中的值匹配元素，ID属性值必须完全匹配。ID在CSS中具有唯一性，含有ID属性的元素尽量选择使用ID来定位。
类：.class
.demo根据元素的类属性中的值匹配元素 ，当有多个class属性值时，必须与其中一个完全匹配，匹配多个类名使用逗号隔开
属性：[attr]
*[href]上述表达式可以匹配到所有含链接属性的元素
属性选择器通过已经存在的属性名或属性值匹配元素，是对元素节点的具体描述
ID和类都可以和元素选择器配合使用
2. 节点描述法
节点描述法即对元素的进一步描述，主要是针对属性，也是属性选择器的补充
单个属性：[attr=value]
h2[class=demo]匹配到含有class属性且值为demo的h2元素
注意：
使用注意事项：
- 注意值必须是全匹配，像class使用空格隔开的多值不能匹配（参考属性模糊匹配）
- 因属性值不需要引号，所以属性值中含有.#字符以及空格不适用，如herf属性
多个属性：[attr=value] [attr=value]
div[class=demo][name=test]匹配到含有属性class和name且值分别为demo和test的div元素
使用方法和注意点和单个属性一致，只是添加了多个不同属性名称
属性值模糊匹配
HTML示例代码
<div class="one two three">元素A</div>
<div class="test-one two">元素B</div>1. [attr~=value]
div[class~=one]匹配到元素A，表示属性值以空格作分隔的列表，且其中一个能匹配到value
2. [attr|=value]
div[class|=test]匹配到元素B，表示属性值以value为前缀且使用连字符‘-’连接
[attr^=value]
div[class^='on']匹配到元素A，表示属性值是以"value"开头的元素
[attr$=value]
div[class$='wo']匹配到元素B，表示属性值是以"value"结尾的元素。
[attr*=value]
div[class*='one']匹配到元素A和元素B，表示属性值包含有"value"的元素
注意：~=和|=是css2版本定义的，value不需要使用引号
3. 家族关系法
<div id=“body”>
<span>后天更美好</span>
<p>世界很大<span>我想去看看</span></p>
<p>海浪向往着陆地</p>
</div>
<span>我向往着你</span>子元素：element>element
#body>span匹配到第一个span元素，表示只会匹配作为第一个元素的直接后代(子元素)的第二元素
后代元素：element element
#body span匹配到div中的所有span元素，和子元素选择器相似，只是不需要相匹配元素之间要有严格的父子关系，也可能是孙子关系
兄弟元素：element+element
span+p匹配到p元素，表示两个元素相邻且在同一个父元素下，第二个元素选中。
第N个子元素（ :nth-child(n) )
#body>p:nth-child(2)匹配到div内的第二个p元素，表示匹配其父元素下的的第二个子元素，n从1开始
注意经常犯的错误：
- 除了兄弟元素，其他关系定位必须指定父元素（可能因为兄弟可以相互参考所以不需要）
- 匹配多个中的某一个时，父元素必须是唯一的，否则nth-child永远是多个的
- 家族关系定位只能向内或同级定位（即往里查找子元素或后代元素），不能向外定位