参考原文地址：https://saucelabs.com/resources/articles/selenium-tips-css-selectors
基础
-
子级元素
在 css 选择器中使用 > 表示父子关系，父级在左，子级在右。xpath中的 / 语法,与之相对应 。
- div > a 表示 div 标签子级元素中的 a 标签。
-
后辈级元素（父级下的所有级元素）
在css选择器中使用 空格 表示后辈级关系。xpath中的 // 语法，与之相对应。
- div a 表示 div 标签下的所有标签中的 a 标签。
根据 id 的值匹配
- #example 表示 id 为 example 的元素。xpath中的 div[@id="example"] 语法， 与之相对应
-
根据 class 的值匹配
- .example 表示 class 为 example 的元素。 xpath中的 div[@class="example"] 语法，与之对应
高级
匹配源如下：
<form class = "form-signin" role = "form" action = "/index.php" method = "post">
<h4 class = "form-signin-heading"></h4>
<input type = "text" class = "form-control" id = "username" name = "username" placeholder = "username" required autofocus><br>
<input type = "password" class = "form-control" id = "password" name = "password" placeholder = "password" required>
<button class = "btn btn-lg btn-primary btn-block radius" type = "submit" name = "login">Login
</button>
</form>
- 下一个同辈元素
这个方法在导航列表或无序列表（form, ul等）里面特别有用。该方法会告诉 selenium 去页面中寻找当前元素的下一个同级元素。css 选择器中是 + 表示这个
- #username + input 表示 id 为 username 的元素的同级中下一个的 input 元素
-
属性值
css 选择器中使用 tagname[attrname1='value1'][attrname2='value2'] 来匹配通过属性查找标签，[]可以是一个或者是多个。xpath中的 tagname[@attrname1='value1' and @attrname2='value2'] 与之相对应。
- input[name='login'][type='submit'] 表示查找 name 属性为 login 并且 type 属性为 submit 的input标签。
- 中括号（属性值可以是）一个或者是多个
特定匹配
html 源代码
<ul id = "recordlist">
<li>Cat</li>
<li>Dog</li>
<li>Car</li>
<li>Goat</li>
</ul>
- parent *:nth-of-type(N) 表示父级元素 parent 下某一类标签的第N个 , 冒号前可以加标签名，指定匹配哪个子标签，星号表示所有类型的子元素
- parent :nth-child(N) 表示父级元素 parent 下的第N个子标签。
-
模糊匹配值
css选择器 在 selenium 有一个有趣的特性允许部分字符串匹配使用 ^= 、 $= 、 *=。 类似模糊查询
- a[id^='id_prefix_'] 表示匹配 id 属性的值以 'id_prefix_' 开头的标签
- a[id$='_id_sufix'] 表示匹配 id 属性的值以 '_id_sufix' 结尾的标签
- a[id*='id_pattern'] 表示匹配 id 属性的值中包含 'id_pattern' 的标签
-
按照标签内的文本匹配
:contains() 这个方法很常用，用于一个标签的文本信息去匹配一个标签
- a:contains('log out') 表示匹配文本为 'log out' 的 a 标签
