这篇文章介绍selenium web driver中的css选择器(css selector)，这也是我们要介绍的最后一种定位器。css大家肯定都听说过，是cascading style sheet的简称，通过各种样式让网页看起来更加美观。和xpath类似，css选择器也是根据html节点进行定位的，所以我们通过对比两者来学习css选择器。
首先，css选择器也分绝对路径和相对路径，绝对路径还是从html开始，又丑又长，所以我们还是使用相对路径。xpath中有“/”和“//”两种标识符，我们讨论时说过这两者的用法和区别，这里再复习一遍：
1. “/” - 可以出现在最开始，也可以出现在中间。最一开始的“/”是绝对路径的标志，指的是html文档本身，意思是在当前的html文档查找；中间的“/”指的是以当前节点为参照往下找第一层匹配对象，也就是只有子节点。
2. “//” - 可以出现在最开始，也可以出现在中间。最一开始的“//”是相对路径的标志，意思是在当前的html文档查找；中间的“//”指的就是以当前节点为参照往下找所有匹配对象，不受层级限制，也就是所有子孙节点。
css选择器也有这两者，只不过用“>”代替“/”，用空格代替“//”。比如我想用xpath选择下图中ul元素下的所有li：
写“//ul/li”就可以了。但如果换成css选择器，就变成了：
直接写“ul>li”。因为“//”被空格取代不用写了，而“/”被“>”取代。 所以，对于从当前节点寻找它的子节点来说，格式就是：
如果是找全部子孙节点，比如找下图中body下面所有的form，用xpath是：
用css选择器“//”就变成了空格
两者对比格式如下:
xpath可以借助属性来定位，css selector也可以。比如用xpath定位下图中class属性为“thumbnail login”的div节点：
改用css选择器就会变成：
注意“@”不用写了，别的一样。格式如下：
如果一个属性不够，需要多个属性协同配合定位，比如用xpath定位下图中微信复选框，需要value和type两个属性：
用and连接两者。改用css selector就会变成：
改成css选择器后不再需要and，但每个属性都要分别用中括号包起来。两者对比格式如下：
以上是AND的例子，OR的格式如下：
注意中间有个逗号参与，而且逗号前后格式一致，都要写当前节点标签，例子就不举了。
此外，如果节点有id或是class的属性，css选择器还可以直接通过它们来定位。比如定位下图中属性id为“button”的按钮：
直接在id值前加井号就可以了。当然，这个元素也可以通过id定位器直接定位。但是请注意，你写成“#button”，代表的是css选择器中使用id属性，本质上用的还是css选择器，而不是id定位器。用id定位器会直接写"button"。两者的对比格式如下，我们一会儿再讨论selenium配合css选择器定位元素的代码，现在先放出来：
再举个class的例子，定位下图中属性class为“STYLE1”的div元素：
直接在class值前加一个点就可以了。同理，这两个元素也可以通过classname定位器直接定位。写成“.STYLE1”代表是css选择器中使用class属性，而直接写“STYLE1”用的才是classname定位器。两者的对比格式如下：
xpath可以借助一些关键字来定位，css选择器也可以。比如通过属性的一部分来定位，看下图，用xpath定位class属性包含“btn-primary”字段的div节点：
改成css选择器后就变成了这个样子：
刚才说了，属性在css选择器中是不用加“@”的。contains被一个在等号前的星号替换。两者对比格式如下：
遗憾的是，在xpath中contains关键字可以用在某一个元素的文本上，旧版本的css可以，但新版本css3不行了。比如用xpath定位下图中文本为“返回目录”的链接：
旧版本的css可以这么写：
如果你还在使用旧版本可以试试。到现在css3也没有对这点进行补充，找文本的话还是用xpath吧。
xpath可以通过添加索引下标来定位，css选择器也可以。比如用xpath找下图ul下面的第三个li子节点：
改成css选择器后就变成了这个样子：
关键字是“nth-of-types(3)”，意思是下面的第几个指定子节点，同时索引下标中括号变成圆括号。两者对比格式如下：
xpath还可以使用轴定位，其中following-sibling查找的是与当前节点同一层的某个指定节点，但出现位置在当前节点之后。比如找class属性值为“col-md-3”的div节点的同层的下一个紧邻节点：
改用css选择器后就变成了这个样子：
用一个加号表示。注意，它只能找到下一个紧邻的节点，不能找到后面所有的。两者对比格式如下：
另外两个xpath轴定位，一个是child，寻找指定子节点，换成css选择器其实就是“>”配合nth-of-type；另外一个是descendant，换成css选择器其实就是空格配合配合nth-of-type，不多说。其它的轴定位貌似用css选择器也不可用，尤其是找父节点或是祖先节点。除此之外，星号通配符也可以使用，直接替代节点标签名即可。
通过两者的比较，我个人暂时还是觉得xpath更容易理解一点。但css选择器也一样强大，两者都是定位的终极大杀器。我分享一个css选择器api网站，上面列了所有css选择器的用法，我一直在研究学习，大家也可以参考一下。那我现在就演示一下用css选择器定位元素，它的格式是：
打开示例网页，我们定位该页面上的元素，然后打印出来。代码如下：
css定位器就介绍到这儿，多练习，和xpath对比着来学得更快。到这里我们就讨论完了所有8种定位器，大家灵活使用。下篇开始我们就要一个一个讨论元素的操作了。本篇文章的源代码是SeleniumCssSelector。
网友评论