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	选择所有 <p> 元素。
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。
element element	div p	选择 <div> 元素内部的所有 <p> 元素。
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。
[attribute]	[target]	选择带有 target 属性所有元素。
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。
element1~element2	p~ul	选择前面有 <p> 元素的每个 <ul> 元素。
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:root	:root	选择文档的根元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。
:not(selector)	:not(p)	选择非 <p> 元素的每个元素。

举例：

p.content: 选择所有class为content的<p>元素，也可以写成p[class="content"]

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

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

<div>
	<p>第1个p</p>
	<p>第2个p</p>
	<span>第1个span</span>
	<p>第3个p</p>
	<span>第2个span</span>
</div>

假设要选中第一个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的用法了。

<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<h3>这是一个标题</h3>
<p>p4</p>
<p>p5</p>

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

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

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