前言

大部分人在使用selenium定位元素时             ，用的是xpath元素定位方式
 
  
 
  
 
  
 
  
 
  
 
  
，因为xpath元素定位方式基本能解决定位的需求             。xpath元素定位方式更直观











，更好理解一些
 
  
 
  
 
  
 
  
 
  
 
  
。

css元素定位方式往往被忽略掉了  
  
  
  
  
  
 ，其实css元素定位方式也有它的价值；相对于xpath元素定位方式来说 
  
  
  
  
  
 ，css元素定位方式更快


 


 


 


 


 


 
，语法更简洁











。

一 
  
  
  
  
  
 、css元素定位：通过元素的标签或者元素的id 
  
  
  
  
  
  、class属性定位

1

 


 


 


 


 


 

、css元素定位方式可以通过元素的id 
 
 
 
 
 
、class 
   
   
   
   
   
   、标签这三个常规属性直接定位  
  
  
  
  
  
 。

2
 

 

 

 

 

 
、举例：如下是百度输入框的的html代码：

<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

①css元素定位使用#号表示id属性 
 
 
 
 
 
，如：#kw

②css元素定位方式使用.表示class属性  
   
   
   
   
   
  ，如.s_ipt

③css元素定位方式也可以直接使用标签名称

 

 

 

 

 

 
，而没有任何标识符
 

 

 

 

 

 
，如：input

二
 

 

 

 

 

 

、css元素定位：通过元素的其它属性定位

1            、css元素定位除了可以通过标签 

 
 

 
 

 
 

 
 

 
 

 
 、class












、id这三个常规属性定位外             ，也可以通过元素的其它属性定位 
  
  
  
  
  
 。例如： 

三                  、css元素定位：通过标签与属性的组合来定位元素 

四 
 
 
 
 
 
 
 
 
 
 
 
 、css元素定位：通过元素的层级关系来定位

1


















、css元素定位可以达到类似xpath元素定位通过元素的层级关系来定位
 

 
 

 
 

 
 

 
 

 
 

 
，例如：

xpath元素定位： //form[@id=form]/span/input 和 //form[@class=fm]/span/input 也可以用css实现 

五            、css元素定位：通过元素的并列索引来定位 

1 
  
 
  
 
  
 
  
 
  
 
  
 、以下图为例：与四相似


 


 


 


 


 


 
。 

2












、css元素定位也可以通过索引option：nth-child(1)来定位子元素











，这点与xpath写法用很大差异                   ，其实很好理解
 
 
 
 
 
 
 
 
 
 
 
 
，直接翻译过来就是第几个小孩 

六 
  
  
  
  
  
 、css元素定位：通过对元素属性的逻辑运算来定位

1 
  
  
  
  
  
  、css同样也可以实现逻辑运算

















，同时匹配两个属性             ，这里跟xpath不一样
 
  
 
  
 
  
 
  
 
  
 
  
，无需写and关键字 
 
 
 
 
 
。

七

 


 


 


 


 


 

、处理selenium中的css_selector定位元素的模糊匹配问题

① 匹配元素的id属性











，先指定一个html标签  
  
  
  
  
  
 ，然后加上“# 
  
  
  
  
  
 ”符号 
  
  
  
  
  
 ，再加上id的属性值  
   
   
   
   
   
  。

driver.find_element_by_css_selector(div#ID).click()

②匹配元素的class属性


 


 


 


 


 


 
，先指定一个html标签 
 
 
 
 
 
，然后加上“. 
  
  
  
  
  
  ”符号  
   
   
   
   
   
  ，再加上class的属性值

 

 

 

 

 

 
。

driver.find_element_by_css_selector(div.CLASS).click()

③匹配元素的其他属性
 

 

 

 

 

 
。【这里不再是‘.’或者‘#’符号

 

 

 

 

 

 
，而是采用了"标签名[属性名=属性值]"的方式定位元素】

driver.find_element_by_css_selector(div[name=NAME]).click()

④组合匹配【支持定位元素对象通过两组或两组以上的属性】

driver.find_element_by_css_selector(div[name=NAME][type=TYPE]).click()

⑤匹配头部

driver.find_element_by_css_selector(div[style^="sp.gif"]).click()

⑥匹配尾部

driver.find_element_by_css_selector(div[style$="sp.gif"]).click()

⑦匹配中间

driver.find_element_by_css_selector(div[style*="sp.gif"]).click()