xpath与css基本使用方法

 

path使用方法

1、工具Firefox50版本以下，安装插件firebug、firepath

 

 

2、使用方法

表达式	描述
/	从根节点选取
//	从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置
//*	代表获取全部元素
//*[@id='i1']	@代表属性定位，选择所有的属性中且标签id等于i1的元素
//*[@placeholder='请通过ID定位元素']	通过标签及标签的属性组合定位元素
//input[@placeholder="请通过ID定位元素"]
//input[@id='i1']
//div[@class='inner']
// div[@ class ='inner'][1]	当出现重复时可以使用下标 角标从1开始
// div[@ class ='driver'][1] / div[@ class ='inner'][1]	通过找到父级唯一 在向下继续查找
//*[@type='text' and @id='i1']	通过逻辑语言定位
//select[@name='city' or @size='4']	通过逻辑语言定位

　
  
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

css selector 使用方法

<div class="topbar_search active">
     <div class="search">
          <input type="text" name="keyword" value="" placeholder="请输入节目名称/红人名称" id='keyword1' maxlength="40" />
          <button onclick="checkinput('1')"></button>
     </div>
</div>

 

**css selector 定位方式不支持角标定位

 

表达式（css定位方式）	描述
.search	class定位
#keyword1	id定位
div>input	标签选择及层级定位元素，选择div下的input标签对应的元素
input	选择所有的input标签对应的元素
div.search	选择div下的class为search的元素
input#keyword1	选择input标签中id为keyword1的元素
input[id='keyword1']	先定位input标签再通过id属性定位
.inner.active	通过多个class定位
div>div>input	层级递进，先从父标签开始一层一层的往下找
div.topbar_search>div>input
[id='keyword1']	属性定位 这里的属性可以为标签中任意属性
[id='keyword1'][name="keyword"]	属性组合定位
[placeholder^='请输入']	以什么开头
[placeholder$='名称']	以什么为结尾
[placeholder*='红人名称']	包含什么内容