与Xpath相比，CSS选择器具有很多的优势，CSS比Xpath更快，更简单。在IE中，Xpath的工作速度非常慢，而CSS的工作速度更快，因此在IE浏览器中我们大多选择使用CSS定位器定位元素，通过Xpath与CSS我们可以解决%99的页面元素定位问题

基本选择器

1. 一般语法：CSS=标签名【属性名=属性值】
2. " * "：选择所有元素
3. 【属性】：选择带有该属性的所有元素
4. 有ID属性：CSS=标签名#ID属性值
5. 有class属性：CSS=标签名.class属性值
6. 有多个class属性时用“.”分隔
7. :root：选择文档的根元素

例子：

<button class="submit btn primary-btn" type="submit" style="background-color: rgb(85, 172, 238);">
 Log in
 </button>

根据其class属性的内容来匹配元素：css=.submit.btn.primary-btn

---

子字符串属性选择器

当网页中有动态生成的ID时，可以选取真正需要的部分

5. 使用字符串包含文本查找css定位器：CSS=标签名【属性名*=属性值】
   在需要属性值是独立的单词的场合：CSS=标签名【属性名~=属性值】
6. 使用字符串起始文本查找css定位器：CSS=标签名【属性名^=属性值】
   在需要属性值是独立的单词的场合：CSS=标签名【属性名|=属性值】
   补充：p:lang(it)：选择带有以 “it” 开头的 lang 属性值的每个 < p> 元素。
7. 使用字符串结尾文本查找css定位器：CSS=标签名【属性名$=属性值】

关于属性选择器更详细的讲解在此处查看: 精读《使用 CSS 属性选择器》.

---

其他元素定位器

1.组合选择器（元素E,F）

• E：选择所有E元素
• E，F：选择所有E元素和所有F元素
• E F：选择E元素内部的所有F元素
• E>F：选择父元素为E的所有F元素
• E+F：选择紧接在E元素后的所有F元素
• E~F：选择E元素之后的所有同级F元素

2.更多灵活的选择器

更准确分类可见：链接: css选择器总结.

元素状态相关

• a:link：选择所有未被访问的链接。
• a:visited：选择所有已被访问的链接。
• a:active：选择活动链接。
• #news:target：选择当前活动的 #news 元素。
• a:hover：选择鼠标指针位于其上的链接。
• input:focus：选择获得焦点的 input 元素。
• input:enabled：选择每个启用的 < input> 元素。
• input:disabled：选择每个禁用的 < input> 元素
• input:checked：选择每个被选中的 < input> 元素。
• ::selection：选择被用户选取的元素部分。
• :not( p)： 选择非 < p> 元素的每个元素。
• p:empty：选择没有子元素的每个 < p> 元素（包括文本节点）。

元素位置相关

• p:first-letter：选择每个 < p> 元素的首字母。
• p:first-line： 选择每个 < p> 元素的首行。
• p:first-child：选择属于父元素的第一个子元素的每个 < p> 元素。
• p:before：在每个 < p> 元素的内容之前插入内容。
• p:after： 在每个 < p> 元素的内容之后插入内容。
• p:first-of-type： 选择属于其父元素的首个 < p> 元素的每个 < p> 元素。
• p:last-of-type：选择属于其父元素的最后 < p> 元素的每个 < p> 元素。
• p:only-of-type：选择属于其父元素唯一的 < p> 元素的每个 < p> 元素。
• p:only-child： 选择属于其父元素的唯一子元素的每个 < p> 元素。
• p:nth-child(2)： 选择属于其父元素的第二个子元素的每个 < p> 元素。
• p:nth-last-child(2)： 同上，从最后一个子元素开始计数。
• p:nth-of-type(2)：选择属于其父元素第二个 < p> 元素的每个 < p> 元素。
• p:nth-last-of-type(2)： 同上，但是从最后一个子元素开始计数。
• p:last-child：选择属于其父元素最后一个子元素每个 < p> 元素。

参考文档：
CSS 选择器参考手册.
Selenium的CSS选择器示例.
在Selenium中使用CSS选择器.