本篇教程介绍了HTML+CSS入门 在selenium中使用CSS选择器进行元素定位，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

1.大家在使用selenium元素定位的时候，通常更多使用的是XPATH，css定位方式用得比较少

   但有时候css定位方式还是有一些优势的，

 

   优势1：一般情况下定位速度要比XPATH快

   优势2：语法要比XPATH更简洁

 

下面简要介绍一下css元素选择器的语法

常见语法

*
 

通用元素选择器，匹配任何元素

E
 

标签选择器，匹配所有使用E标签的元素

.info
 

class选择器，匹配所有class属性中包含info的元素

#footer
 

id选择器，匹配所有id属性等于footer的元素

E,F
 

多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔

E F
 

后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔

E > F
 

子元素选择器，匹配所有E元素的子元素F

E + F
 

毗邻元素选择器，匹配紧随E元素之后的同级元素F （只匹配第一个）

E ~ F
 

同级元素选择器，匹配所有在E元素之后的同级F元素

E[att='val']
 

属性att的值为val的E元素 （区分大小写）

E[att^='val']
 

属性att的值以val开头的E元素 （区分大小写）

E[att$='val']
 

属性att的值以val结尾的E元素 （区分大小写）

E[att*='val']
 

属性att的值包含val的E元素 （区分大小写）

E[att1='v1'][att2*='v2']
 

属性att1的值为v1，att2的值包含v2 （区分大小写）

E:contains('xxxx')
 

内容中包含xxxx的E元素

E:not(s)
 

匹配不符合当前选择器的任何元素

 

例如这样一段html代码的网页

<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>

匹配示例：

locator
 

匹配

css=div

css=div.formdiv
 

<div class="formdiv">

css=#recordlist

css=ul#recordlist
 

<ul id="recordlist">

css=div.subdiv p

css=div.subdiv > ul > p
 

<p>Heading</p>

css=form + div
 

<div class="subdiv">

css=p + li

css=p ~ li
 

二者定位到的都是 <li>Cat</li>

但是storeCssCount的时候，前者得到1，后者得到4

css=form > input[name=username]
 

<input name="username">

css=input[name$=id][value^=SYS]
 

<input value="SYS123456" name="vid" type="hidden">

css=input:not([name$=id][value^=SYS])
 

<input name="username" type="text"></input>

css=li:contains('Goa')
 

<li>Goat</li>

css=li:not(contains('Goa'))
 

<li>Cat</li>

 

 

 

2.css中的结构性定位

 

结构性定位就是根据元素的父子、同级中位置来定位，css3标准中有定义一些结构性定位伪类如nth-of-type，nth-child，但是使用起来语法很不好理解，这里就不做介绍了。

Selenium中则是采用了来自Sizzle的css3定位扩展，它的语法更加灵活易懂

Sizzle Css3的结构性定位语法

 

E:nth(n)

E:eq(n)
 

在其父元素中的E子元素集合中排在第n+1个的E元素 (第一个n=0)

E:first
 

在其父元素中的E子元素集合中排在第1个的E元素

E:last
 

在其父元素中的E子元素集合中排在最后1个的E元素

E:even
 

在其父元素中的E子元素集合中排在偶数位的E元素 (0,2,4…)

E:odd
 

在其父元素中的E子元素集合中排在奇数的E元素 (1,3,5…)

E:lt(n)
 

在其父元素中的E子元素集合中排在n位之前的E元素 (n=2,则匹配0,1)

E:gt(n)
 

在其父元素中的E子元素集合中排在n位之后的E元素 (n=2，在匹配3,4)

E:only-child
 

父元素的唯一一个子元素且标签为E

E:empty
 

不包含任何子元素的E元素，注意，文本节点也被看作子元素

 

匹配示例：

例如还是段的代码

<div class="subdiv">

<ul id="recordlist">

<p>Heading</p>

<li>Cat</li>

<li>Dog</li>

<li>Car</li>

<li>Goat</li>

</ul>

</div>

 

locator
 

匹配

css=ul > li:nth(0)
 

<li>Cat</li>

css=ul > *:nth(0)

css=ul > :nth(0)
 

<p>Heading</p>

css=ul > li:first
 

<li>Cat</li>

css=ul > :first
 

<p>Heading</p>

css=ul > *:last

css=ul > li:last
 

<li>Goat</li>

css=ul > li:even
 

Cat, Car

css=ul > li:odd
 

Dog, Goat

css=ul > :even
 

<p>Heading</p>

css=ul > p:odd
 

[error] not found

css=ul > li:lt(2)
 

<li>Cat</li>

css=ul > li:gt(2)
 

<li>Goat</li>

css=ul > li:only-child

css=ul > :only-child

css=ul > *:only-child
 

[error] not found (ul没有only-child)

css=div.subdiv > :only-child
 

<ul id="recordlist">

… … … …

</ul>

 

3.

 

css中的结构性定位

结构性定位就是根据元素的父子、同级中位置来定位，css3标准中有定义一些结构性定位伪类如nth-of-type，nth-child，但是使用起来语法很不好理解，这里就不做介绍了。

Selenium中则是采用了来自Sizzle的css3定位扩展，它的语法更加灵活易懂

Sizzle Css3的结构性定位语法

 

E:nth(n)

E:eq(n)
 

在其父元素中的E子元素集合中排在第n+1个的E元素 (第一个n=0)

E:first
 

在其父元素中的E子元素集合中排在第1个的E元素

E:last
 

在其父元素中的E子元素集合中排在最后1个的E元素

E:even
 

在其父元素中的E子元素集合中排在偶数位的E元素 (0,2,4…)

E:odd
 

在其父元素中的E子元素集合中排在奇数的E元素 (1,3,5…)

E:lt(n)
 

在其父元素中的E子元素集合中排在n位之前的E元素 (n=2,则匹配0,1)

E:gt(n)
 

在其父元素中的E子元素集合中排在n位之后的E元素 (n=2，在匹配3,4)

E:only-child
 

父元素的唯一一个子元素且标签为E

E:empty
 

不包含任何子元素的E元素，注意，文本节点也被看作子元素

 

匹配示例：

例如还是段的代码

<div class="subdiv">

   <ul id="recordlist">

      <p>Heading</p>

      <li>Cat</li>

      <li>Dog</li>

      <li>Car</li>

      <li>Goat</li>

   </ul>

</div>

 

locator
 

匹配

css=ul > li:nth(0)
 

<li>Cat</li>

css=ul > *:nth(0)

css=ul > :nth(0)
 

<p>Heading</p>

css=ul > li:first
 

<li>Cat</li>

css=ul > :first
 

<p>Heading</p>

css=ul > *:last

css=ul > li:last
 

<li>Goat</li>

css=ul > li:even
 

Cat, Car

css=ul > li:odd
 

Dog, Goat

css=ul > :even
 

<p>Heading</p>

css=ul > p:odd
 

[error] not found

css=ul > li:lt(2)
 

<li>Cat</li>

css=ul > li:gt(2)
 

<li>Goat</li>

css=ul > li:only-child

css=ul > :only-child

css=ul > *:only-child
 

[error] not found (ul没有only-child)

css=div.subdiv > :only-child
 

<ul id="recordlist">

… … … …

</ul>    

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！