css selector定位元素

selenium中经常要用css selector定位元素，虽说可以用firefox的firebug&firepath直接copy元素的xpath路径，但有时还是很必要用css selector来定位，也算技多不压身吧~~系统的学习一下，也当是临阵磨枪。
一共8种方式的选择器。

元素选择器

根据元素的标签定位，如下：

<button>OK</button>

selenium举例：
(By.CSS_SELECTOR,‘button’)
By.TAG_NAME(‘button’)

类选择器

根据元素的class属性来定位，
selenium举例：
(By.CSS_SELECTOR,‘.important’)，会返回标题&段落两行；
(By.CSS_SELECTOR,‘.important.warning’)，多类选择器，只会定位到段落一行
By.CLASS_NAME(‘important’)

ID选择器

根据元素的id属性来定位，
selenium举例：
(By.CSS_SELECTOR,‘#intro’)；
By.ID(‘intro’)
注意：id在一个html中唯一，id属性区分大小写

属性选择器

根据元素的属性定位：

<p class="important warning">This paragraph is a very important warning.</p>

selenium举例：
(By.CSS_SELECTOR,‘p[class=”import warning”]’)
属性与属性的值需要完全匹配，如上面用p[class=’impprtant’]就定位不到；
部分属性匹配：(By.CSS_SELECTOR,‘p[class~=”import warning”]’)；
子串匹配&特定属性匹配：
[class^=”def”]：选择 class 属性值以 “def” 开头的所有元素
[class$=”def”]：选择 class 属性值以 “def” 结尾的所有元素
[class*=”def”]：选择class 属性值中包含子串 “def” 的所有元素
[class|=”def”]：选择class 属性值等于“def”或以“def-”开头的元素（这个是特定属性匹配）

后代选择器

选择某个元素的后代的元素：
selenium举例：
(By.CSS_SELECTOR,‘div button’)，div元素的所有的后代元素中标签为button元素，不管嵌套有多深；

子代选择器

选择某个元素的子代元素：
selenium举例：
(By.CSS_SELECTOR,‘div > button’)，div元素的所有的子代元素中标签为button元素（>符号前后的空格可有可无）

相邻兄弟选择器

一个元素不好定位时，它的兄长元素很起眼，可以借助兄长来扬名，因此不妨称之为“弟弟选择器”，即选择某个元素的弟弟元素（先为兄，后为弟）：
selenium举例：
(By.CSS_SELECTOR,‘button + li’)，button与li属于同一父元素，且button与li相邻，选择button下标签为li的元素

伪类选择器

• 动态伪类（Dymaic pseudo-classes）
  超链接相关的伪类，相对于超链接的几种状态，:link/:visited/:hover/:active
  还有:focus。这类伪类不好用于元素定位，不做深究，不求甚解。

• first-child/nth-child(n)/last-child伪类

<!DOCTYPE> 
<ul>
<p>这是个段落</p>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>

selenium举例：
(By.CSS_SELECTOR,‘ul li:nth-child(3)’)，ul元素的后代元素中，有多个标签为li的元素，选择这些li元素中的第3个
注意，html中必须声明<!DOCTYPE>才能使用-child这种伪类；伪类选择器不区分大小写

References:
http://www.w3school.com.cn/css/css_selector_type.asp
https://www.w3.org/TR/selectors/#pseudo-classes
https://www.seleniumhq.org/docs/03_webdriver.jsp#introducing-the-selenium-webdriver-api-by-example