CSS 可以比较灵活选择控件的任意属性，一般情况下定位速度要比XPath 快，但对于初学者来说比较
难以学习使用，下面我们就详细的介绍CSS 的语法与使用。
一、CSS 选择器的常见语法：

例如下面一段代码：
<div class="formdiv">
　　<form name="fnfn">
　　　　<input name="username" type="text"></input>
　　　　<input name="password" type="text"></input>
　　　　<input name="continue" type="button"></input>
　　　　<input name="cancel" type="button"></input>
　　　　<input value="SYS123456" name="vid" type="text">
　　　　<input value="ks10cf6d6" name="cid" type="text">
　　</form>
　　<div class="subdiv">
　　　　<ul id="recordlist">
　　　　　　<p>Heading</p>
　　　　　　<li>Cat</li>
　　　　　　<li>Dog</li>
　　　　　　<li>Car</li>　　　　

　　　　　　<li>Goat</li>
　　　　</ul>
　　</div>
</div>

通过CSS 语法进行匹配的实例：

 cssSelector 匹配
css=div <div class="formdiv">
css=div.formdiv <div class="formdiv">
css=#recordlist
css=ul#recordlist		 <ul id="recordlist">
css=div.subdiv p <p>Heading</p>
css=div.subdiv>ul>p <p>Heading</p>
css=form+div <div class="subdiv">
css=p+li <li>Cat</li>
css=p~li <li>Cat</li> 得到4个li中的第一个
css=form>input[name=username] <input name="username" type="text"></input>
css=input[name$=id][value^=SYS] <input value="SYS123456" name="vid" type="text">
css=input[value*='SYS'] <input value="SYS123456" name="vid" type="text">
css=a:link <a href="http://www.baidu.com">baidu</a>
css=input:first-child <input name="username" type="text"></input>
css=input:last-child <input value="ks10cf6d6" name="cid" type="text">
css=li:nth-child(2) <li>Cat</li> 因为这个li是ul下的第二个元素，所以是child（2）
css=:root <html>

二、css 中的结构性定位

结构性定位就是根据元素的父子、同级中位置来定位，css3标准中有定义一些结构性定位伪类如
nth-of-type，nth-child，但是使用起来语法很不好理解，这里就不做介绍了。
Selenium 中则是采用了来自Sizzle 的css3定位扩展，它的语法更加灵活易懂。
Sizzle Css3的结构性定位语法：

例如下面一段代码：
<div class="subdiv">
<ul id="recordlist">
<p>Heading</p>
<li>Cat</li>
<li>Dog</li>
<li>Car</li>
<li>Goat</li>
</ul>
</div>

三、下面是一些XPATH 和CSS 的类似定位功能比较。

 定位方式 XPath CSS
标签 //div div
By id //div[@id='recordlist'] div#recordlist
By class //div[@class='subdiv']
//div[contains(@class,'subdiv')]		 div.subdiv
By 属性 //input[@name='username'] input[name=username]
input[name^=user]
input[name$=name]
input[name*=erna]
定位子元素 //ul[@id='recordlist']/*
//ul/p		 ul#recordlist>*
ul#recordlist>p
定位后代元素 //div[@class='subdiv']//p div p
By index //li[4] 定位第四个li li:nth-child(5)
By content //li[contains(text(),'Goa')] li contains('Goa') 该方法
已经废弃
根据子元素回溯定位父元素 //*[./a[@id='baiduUrl']]

//div[.//p[text()='Heading']]
匹配到：<div class="subdiv">		 ？
根据兄弟元素定位 //ul[preceding-sibling::a[@id='baiduUrl']]
//ul[preceding-sibling::a[//div[@class='subdiv']/a]]
都匹配到：<ul id="recordlist">		 a+ul
a#baiduUrl+ul
匹配到：<ul id="recordlist">

通过对比，我们可以看到，CSS 定位语法比XPath 更为简洁，定位方式更多灵活多样；不过对CSS 理
解起来要比XPath 较难；但不管是从性能还是定位更复杂的元素上，CSS 优于XPath，笔者更推荐使用CSS
定位页面元素。

CSS选择器定位的使用的更多相关文章

  1. selenium中CSS选择器定位

    selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...

  2. 『心善渊』Selenium3.0基础 — 8、使用CSS选择器定位元素

    目录 1.CSS选择器介绍 2.CSS选择器定位语法 3.Selenium中使用CSS选择器定位元素 (1)通过属性定位元素 (2)通过标签定位元素 (3)通过层级关系定位元素 (4)通过索引定位元素 ...

  3. 使用CSS选择器定位页面元素

    摘录:http://blog.csdn.net/defectfinder/article/details/51734690 CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大.在自动化 ...

  4. Css选择器定位详解

    1.使用 class 属性来定位元素,方法如下: driver.findElement(By.cssSelector("input.login")); 即可以先指定一个 HTML的 ...

  5. 使用CSS选择器进行元素定位

    在selenium webdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位的时候,使用css 和 xpath才是经常需要用到的. 之前有专门讲过使用xpa ...

  6. CSS元素定位

    使用 CSS 选择器定位元素 CSS可以通过元素的id.class.标签(input)这三个常规属性直接定位到,而这三种编写方式,在HTML中编写style的时候,可以进行标识如: #su       ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. selenium元素定位之css选择器

    在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...

  9. css选择器用法，使用css定位元素，css和xpath元素定位的区别

    css定位元素 1.什么是css? CSS(Cascading Style Sheets)层叠样式表,是一种语言,用来描述html或者xml的显示样式.在css语言中有css选择器,在selenium ...

随机推荐

  1. Educational Codeforces Round 18 B

    Description n children are standing in a circle and playing the counting-out game. Children are numb ...

  2. 洛谷 P3400 仓鼠窝

    卡常 #pragma GCC optimize(2) #include<cstdio> #include<algorithm> #include<cstring> ...

  3. 贪心 HDOJ 5090 Game with Pearls

    题目传送门 /* 题意:给n, k,然后允许给某一个数加上k的正整数倍,当然可以不加, 问你是否可以把这n个数变成1,2,3,...,n, 可以就输出Jerry, 否则输出Tom. 贪心:保存可能变成 ...

  4. 507 Perfect Number 完美数

    对于一个 正整数,如果它和除了它自身以外的所有正因子之和相等,我们称它为“完美数”.给定一个 正整数 n, 如果他是完美数,返回 True,否则返回 False示例:输入: 28输出: True解释: ...

  5. 生产环境中配置的samba

    实验需求: 由于实验室纳新一帮新孩子,搭建samba主要是临时共享一些学习资源的,基本上大家用的都是windows.而且这个服务可以让他们在校园的里的个个角落都可以访问到,所以给挂了学校的公网,不过我 ...

  6. RHEL 6.5----CDN（lumanger）

    主机名  IP   服务 master 192.168.30.130  CDN(LuManager) slave 192.168.30.131  DNS  软件安装包下载地址及安装方法 http:// ...

  7. 01_C++学习笔记_入门

    1.float类型只能表示数字里面的前6位或者前7位.也就是说c++只能保证float类型的数字的前6位是正确的.如果要求的精度更高的话,请使用double和long double. float精度是 ...

  8. void运算符

    void是一元运算符,它出现在操作数之前,操作数可以是任意类型,操作数会照常计算,但忽略计算结果并返回undefined.由于void会忽略操作数的值,因此在操作数具有副作用的时候使用void来让程序 ...

  9. centos7环境搭建Eureka-Server注册中心集群

    目的:测试和线上使用这套独立的Eureka-Server注册中心集群,目前3台虚拟机集群,后续可直接修改配置文件进行新增或减少集群机器. 系统环境: Centos7x64 java8+(JDK1.8+ ...

  10. Hyperledger(超级账本)的worldstate和SAP CRM的CRMD_CUMULAT_H

    Hyperledger fabric是基于区块链技术的一个开源项目,由Linux基金会于2015年发起,目的是推进区块链数字技术和交易验证的发展和落地. Hyperledger由多个区块构成了一个有序 ...