定位元素的注意事项（划重点）

找到待定位元素的唯一属性
如果该元素没有唯一属性，则先找到能被唯一定位到的父元素/子元素/相邻元素，再使用 > , " " , + 等进行辅助定位
不要使用随机唯一属性定位
最重要的是多跟研发沟通，尽量把关键元素加上ID或者name，并减少不合理的页面元素，例如重复ID这样的事情最好不要发生

首先，基础的CSS选择器

选择器	名字	例子	例子描述
基础选择器
.class	class选择器	.intro	选择 class=“intro” 的所有元素。
#id	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]	a[href*=“miitbeian”]		选择a节点，里面的href属性包含了 miitbeian 字符串
[attribute^=value]	a[href^=“http”]		要选择a节点，里面的href属性以 http 开头
[attribute$=value]	a[href$=“gov.cn”]		选择a节点，里面的href属性以 gov.cn 结尾
[attribute~=value]	[title~=flower]		选择 title 属性包含单词 “flower” 的所有元素。
[attribute\|=value]	[lang\|=en]		选择 lang 属性值以 “en” 开头的所有元素。

如果一个元素具有多个属性

<div class="misc" ctype="gun">沙漠之鹰</div>

CSS 选择器可以指定选择的元素要同时具有多个属性的限制，像这样 div[class=misc][ctype=gun]

html页面中，css正确写法的栗子

/* id选择器 */
#abc {
    color: #cc0000;
    font-size: 12px;
}

/* class 选择器 */
.down {
    color: #66cc66;
}

/* 标签选择器 */
p {
    background: cornflowerblue;
}

/* 标签选择器可以与class选择器组合使用 */
p.down {
    font-size: 24px;
}

/* 分组选择器 */
ul,
div,
.up {
    color: #cc0000;
}

/* 属性选择器 */
[href] {
    color: #cc6600;
}

span[title="hello"] {
    color: #00FFFF;
}

span[title~="python"] {
    font-size: 24px;
}

/* 后代选择器 */
div li {
    background: forestgreen;
}

/* 子元素选择器 */
div[id="up"]>ul {
    color: #cc6600;
}

/* 相邻兄弟选择器 */
#down+li {
    font-size: 24px;
}

/* 后续兄弟选择器 */
#down~li {
    color: #cc0000;
}

然后，伪类选择器

选择器	例子	例子描述
:first-child	p:first-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	选择属于其父元素最后一个子元素每个元素。

举例说明

参照白月黑羽的网址去练习

语法格式：
通过 CSS Selector 选择单个元素的方法是

find_element(By.CSS_SELECTOR, CSS Selector参数)

选择所有元素的方法是

find_elements(By.CSS_SELECTOR, CSS Selector参数)

根据 tag名、id、class 选择元素

tag名

比如要选择所有的tag名为div的元素，就可以是这样

elements = wd.find_elements(By.CSS_SELECTOR, 'div')

等价于

elements = wd.find_elements(By.TAG_NAME, 'div')

id

根据id属性选择元素的语法是在id号前面加上一个井号： #id值

有下面这样的元素：

<input  type="text" id='searchtext' />

就可以使用 #searchtext 这样的 CSS Selector 来选择它。

  element = wd.find_element(By.CSS_SELECTOR, '#searchtext')

等价于

element = wd.find_element(By.ID, 'searchtext')

class

根据class属性选择元素的语法是在 class 值前面加上一个点： .class值
要选择所有 class 属性值为 animal的元素动物除了这样写

elements = wd.find_elements(By.CLASS_NAME, 'animal')

等价于

elements = wd.find_elements(By.CSS_SELECTOR, '.animal')

选择子元素和后代元素

选择子元素

如果元素2 是元素1 的直接子元素, CSS Selector 选择子元素的语法是这样的
元素1 > 元素2
也支持更多层级的选择，比如
元素1 > 元素2 > 元素3 > 元素4
就是选择元素1 里面的子元素元素2 里面的子元素元素3 里面的子元素元素4 ，最终选择的元素是元素4

后代元素

如果元素2 是元素1 的后代元素， CSS Selector 选择后代元素的语法是这样的
元素1 元素2
中间是一个或者多个空格隔开
最终选择的元素是元素2 ，并且要求这个元素2 是元素1 的后代元素。
也支持更多层级的选择，比如
元素1 元素2 元素3 元素4
最终选择的元素是元素4