Selenium - CSS 选择器简介

Selenium定位的两大利器非xpath和css selector莫属了,熟练掌握任何一种都能解决绝大部分的定位问题。上一篇简单介绍了一下xpath,这次就讲讲css selector, 但是个人并不太喜欢这种方式,觉得可读性上没有xpath那么清晰。老样子更多的理论知识请移步w3school,这里主要通过举例帮助大家运用。

首先何为CSS, CSS指层叠样式表(Cascading Style Sheets)用来告诉浏览器如何显示HTML元素,它的基础语法为: selector {property: value;property: value;... property: value},selector即选择器用来定位元素,定义哪些元素需要套用之后的样式。property为属性表示要套用哪些样式,Value就是样式的具体值。 而这里的selector就是今天的主角。在w3school的教程中将选择器分成了各个种类,例如ID选择器,属性选择器,在Selenium的实际运用中都是混合起来才能定位,所以先上语法定义,然后具体举例帮助理解。

选择器

例子

例子描述

.class

.intro

选择 class="intro" 的所有元素。

#id

#firstname

选择 id="firstname" 的所有元素。

*

*

选择所有元素。

element

p

选择所有

元素。

element,element

div,p

选择所有

元素和所有

元素。

element element

div p

选择

元素内部的所有

元素。

element>element

div>p

选择父元素为

元素的所有

元素。

element+element

div+p

选择紧接在

元素之后的所有

元素。

[attribute]

[target]

选择带有 target 属性所有元素。

[attribute=value]

[target=_blank]

选择 target="_blank" 的所有元素。

[attribute~=value]

[title~=flower]

选择 title 属性包含单词 "flower" 的所有元素。

element1~element2

p~ul

选择前面有

元素的每个

    元素。

[attribute^=value]

a[src^="https"]

选择其 src 属性值以 "https" 开头的每个 元素。

[attribute$=value]

a[src$=".pdf"]

选择其 src 属性以 ".pdf" 结尾的所有 元素。

[attribute*=value]

a[src*="abc"]

选择其 src 属性中包含 "abc" 子串的每个 元素。

:first-of-type

p:first-of-type

选择属于其父元素的首个

元素的每个

元素。

:last-of-type

p:last-of-type

选择属于其父元素的最后

元素的每个

元素。

:only-of-type

p:only-of-type

选择属于其父元素唯一的

元素的每个

元素。

:only-child

p:only-child

选择属于其父元素的唯一子元素的每个

元素。

:nth-child(n)

p:nth-child(2)

选择属于其父元素的第二个子元素的每个

元素。

:nth-last-child(n)

p:nth-last-child(2)

同上,从最后一个子元素开始计数。

:nth-of-type(n)

p:nth-of-type(2)

选择属于其父元素第二个

元素的每个

元素。

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上,但是从最后一个子元素开始计数。

:last-child

p:last-child

选择属于其父元素最后一个子元素每个

元素。

:root

:root

选择文档的根元素。

:empty

p:empty

选择没有子元素的每个

元素(包括文本节点)。

:not(selector)

:not(p)

选择非

元素的每个元素。


举例:

p.content: 选择所有class为content的

元素,也可以写成p[class="content"]

div#id1>p.content:在ID为id1的div的子元素中选在所有class为content的

元素

input[class='btn'][type='submit']: 选择所有class为btn且type为submit的所有元素

第1个p

第2个p

第1个span

第3个p

第2个span
假设要选中第一个span,那么以下两个写法都可以

span:nth-of-type(1): 在同级的兄弟元素中选择第一个span元素
span:nth-of-child(3): 选择作为第三个子元素,且是span的元素

这里有个问题, p:nth-child(3)会找到哪个元素呢?答案是没有。在这段html中第三个子元素是span不是p,所以不会找到任何元素。而span:nth-of-type(2)会匹配到第二个span元素。相信能够理解nth-of-type和nth-of-child的用法了。

p1

p2

这是一个标题

p3

这是一个标题

p4

p5

p+p: 会选择到p2, p5,表示同级元素中所有紧跟在p后面的p元素

p~p: 会选择到p2,p3,p4,p5, 表示同级元素中所有前面有p元素的p元素

这里把常用的以及几个比较容易混淆难懂的语法用例子解释了一下,希望看了之后能对css选择器有个大致的了解

你可能感兴趣的:(Selenium - CSS 选择器简介)