CSS选择器定位的使用
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选择器定位的使用的更多相关文章
- selenium中CSS选择器定位
selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...
- 『心善渊』Selenium3.0基础 — 8、使用CSS选择器定位元素
目录 1.CSS选择器介绍 2.CSS选择器定位语法 3.Selenium中使用CSS选择器定位元素 (1)通过属性定位元素 (2)通过标签定位元素 (3)通过层级关系定位元素 (4)通过索引定位元素 ...
- 使用CSS选择器定位页面元素
摘录:http://blog.csdn.net/defectfinder/article/details/51734690 CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大.在自动化 ...
- Css选择器定位详解
1.使用 class 属性来定位元素,方法如下: driver.findElement(By.cssSelector("input.login")); 即可以先指定一个 HTML的 ...
- 使用CSS选择器进行元素定位
在selenium webdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位的时候,使用css 和 xpath才是经常需要用到的. 之前有专门讲过使用xpa ...
- CSS元素定位
使用 CSS 选择器定位元素 CSS可以通过元素的id.class.标签(input)这三个常规属性直接定位到,而这三种编写方式,在HTML中编写style的时候,可以进行标识如: #su ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- selenium元素定位之css选择器
在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...
- css选择器用法，使用css定位元素，css和xpath元素定位的区别
css定位元素 1.什么是css? CSS(Cascading Style Sheets)层叠样式表,是一种语言,用来描述html或者xml的显示样式.在css语言中有css选择器,在selenium ...
随机推荐
- Brush (IV) LightOJ - 1018
题意:平面上有一些点,每刷一次可以把同一条直线上的点都刷光,问最少几次把所有点刷光. 方法: 显然是一个状态压缩dp.ans[S]表示把S集合中点刷掉的最少次数.最开始想到的方法是如果S中只有一个或两 ...
- 贪心+拓扑排序 AOJ 2456 Usoperanto
题目传送门 题意:给出一条链,比如x连到y,x一定要在y的左边,且代价是这条链经过的点的权值和,问如何排序使得代价最小 分析:类似拓扑排序,先把入度为0的点入队,把指向该点的所有点按照权值排序,保证这 ...
- HAL之定时器
一首先得对定时器的时钟与系统时钟的关系搞清楚,基本定时器的时钟来自APB1最大36MHZ.(定时器倍频值为1) 二 在STM32CubeMX中打开外设功能,时钟源选择内部:然后在配置定时器3中的参数设 ...
- XSS漏洞解析(三)
系统存在xss漏洞就容易引发CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为: ...
- 10.JAVA-接口、工厂模式、代理模式、详解
1.接口定义 接口属于一个特殊的类,这个类里面只能有抽象方法和全局常量 (该概念在JDK1.8之后被打破,在1.8后接口中还可以定义普通方法和静态方法,在后续章节会详讲) 1.1 接口具有以下几个原 ...
- (办公)定时任务quartz入门
1.简单入门. 2.定时任务注入service. 入门案例: 1.1. 加jar <dependency> <groupId>org.quartz-scheduler</ ...
- LN : leetcode 416 Partition Equal Subset Sum
lc 416 Partition Equal Subset Sum 416 Partition Equal Subset Sum Given a non-empty array containing ...
- 获得select被选中option的value和text
一:JavaScript原生的方法 1:得到select对象: var myselect=document.getElementById(“test”); 2:得到选中项的索引:var index=m ...
- Google的Java编程风格指南
作者:Hawstein出处:http://hawstein.com/posts/google-java-style.html声明:本文采用以下协议进行授权: 自由转载-非商用-非衍生-保持署名|Cre ...
- pre-network android 网络优化预加载框架
网络优化是所有app开发中非常重要的一部分,如果将网络请求前置就是在点击跳转activity之前开始网络加载那么速度将会有质的提升.也就是网络预先加载框框架. 网络预加载框架,监听式网络前置加载框架- ...