Python + selenium 元素定位（五）-----css selector 的高级用法

css selector 的高级用法

CSS（Casading Style Sheets）层叠样式表。一种用来表现HTML或者XML等文件样式的语言。css选择器是浏览器用来选择元素，selenium 也要选择元素，可以使用css选择器来选择Web元素。

定位元素的注意事项：

1、找到等待定位的元素的唯一属性

2、如果该元素没有唯一属性，则先找到能够给被唯一定位的父元素/子元素/相邻元素，再使用 “>” 、“ ”、“+” 等辅助定位要定位的元素。

3、不要使用随机唯一属性，属性是会发生改变。 ID = “Dev45” Dev46

1、ID选择器 通过 # 来定义，通过元素的ID属性来定位。 格式： #id属性值

id选择器来定位元素 格式： #id属性值 通过 # 来定义的

print (driver.find_element_by_css_selector("#pLabel").get_attribute("id"))

2、class选择器（类选择器） 使用 . （点）来定义 格式： .class属性的值

class 选择器 使用 . （点）来定义 格式： .class属性的值

driver.find_element_by_css_selector(".RedChamber").send_keys("class 选择器    使用  . （点）来定义  格式：  .class属性的值")

如果class属性值有空格，则可以使用如下方法来定位：

方法一：

可以使用 点 替换掉所有的空格（例如： .Dream.of.the.Red.Chamber）

方法二：

可以截取一部分值，然后在截取的部分值之前加上 . （点） （例如： .Dream） class属性值有空格

driver.find_element_by_css_selector(".Dream.of.the.Red.Chamber").send_keys("class属性值有空格") 
driver.find_element_by_css_selector(".Dream").send_keys("截取部分值在前面加上点来定位")

3、标签选择器 通过 标签的标签名 来定位元素

标签选择器 通过标签的标签名来定位元素

print (driver.find_element_by_css_selector("span").text)

4、属性选择器 根据标签中的属性来定位元素， 格式： [属性名=”属性值”]

属性选择器 使用方括号把属性扩起来 ，格式： [属性名=“属性值”] 例如： [id=“form”]

print (driver.find_element_by_css_selector('[id="form"]').get_attribute('id'))

没有指定属性值，则返回所有具有某个属性的元素。

没有指定属性值

print (driver.find_element_by_css_selector("[id]").get_attribute("id"))

5、id选择器和class选择器的组合使用 即要定位的元素既要满足id属性值为指定的值，又要满足class属性的值为指定的值。

id选择器和class选择器组合使用 #ID .Dream 两个条件是 且 的关系

driver.find_element_by_css_selector("#ID.Dream").send_keys("id选择器和class选择器组合使用")

6、id选择器和标签选择器的组合使用 标签选择器只能放在id选择器的前面

id选择器和标签选择器的组合使用

print (driver.find_element_by_css_selector("a#tianshang").text)

7、标签选择器和class选择器组合使用

标签选择器和class选择器的组合使用 标签选择器只能放在class选择器的前面

点击展开下拉框

driver.find_element_by_css_selector("select").click()

选择下拉框中的内容

driver.find_element_by_css_selector("option.poem").click()

8、使用多个属性来定位元素

使用多个属性来定位元素

driver.find_element_by_css_selector('[id="IamID"][name="first"]').send_keys("使用多个属性来定位元素")

选中某一行，如果鼠标在最前面，则使用 shift + end，如果鼠标在最后面，则使用shift + home键。

9、标签选择器、id选择器、class选择器、属性选择器组合使用

标签选择器、id选择器、class选择器、属性选择器组合使用

driver.find_element_by_css_selector('input[id="IamID"].poem[name="first"]').send_keys("标签选择器、id选择器、class选择器、属性选择器组合使用")

10、分组选择器

使用的场景：id的属性值 在 ID1 和 ID2 之间变化，只能使用id属性来定位元素，此时可以使用分组选择器来定位元素。

分组选择器 使用 , （逗号）来定义

driver.find_element_by_css_selector("#IamID1,#IamID2").send_keys("使用  , （逗号）来定义")

11、后代选择器

使用 空格 来定义，父元素 加上 空格 后代元素

只能够选择到直系 后代，而不能选择 旁系后代，不论是儿子还是孙子都可以。

后代选择器 使用 父元素 加上 空格 后面元素

print (driver.find_element_by_css_selector("#form span").tag_name)

12、子元素选择器 只能选择自己的儿子，不能隔代， 使用 > 来定位

子元素选择器 使用 > （大于号）来定位 只能选择自己的儿子，不能隔代

print (driver.find_element_by_css_selector('[id="form"] > span').text)

13、相邻兄弟选择器

相邻的（两个元素之间不能有间隔） 兄弟关系（有相同的父元素），只能向后 选择，不能向前选择。 使用 + 号来定位

相邻兄弟选择器 使用 + 来定位

print (driver.find_element_by_css_selector(".Dream + br").tag_name)

14、后续兄弟选择器

使用 ~ 来定位，后续兄弟选择器选取所有指定元素之后的兄弟元素，中间可以有间隔。

后续兄弟选择器 使用 ~ 来定位，后续兄弟选择器选取所有指定元素之后的兄弟元素，中间可以有间隔

print (driver.find_element_by_css_selector("#pLabel ~ br").tag_name)

15、伪类

Pseudo-classes [‘su:dƏu]

伪类选择元素基于的是当前元素处于的状态，或者元素当前所有的特性，而不是元素的id、class等静态属性标志。由于状态是动态变换的，所有一个元素达到一个状态以后，就可能获取到一个伪类的样式，当状态改变时，就有可能失去了这个样式。它的功能与class(类)类似，所以称之为伪类。

1）:nth-child(n)

匹配属于其父元素下的第n个子元素

option:nth-child(3) 表示匹配到 option元素的父元素下的第3个子元素。

:nth-child(n) 匹配属于其父元素下的第n个子元素

print (driver.find_element_by_css_selector("option:nth-child(3)").get_attribute("value"))

2）:nth-last-child(n)

匹配属于其父元素下的倒数第n个子元素

:nth-last-child(n) 匹配属于其父元素下的倒数第n个子元素

print (driver.find_element_by_css_selector("option:nth-last-child(4)").get_attribute("value"))

3）:first-child

匹配属于其父元素下的第1个子元素

:first-child 匹配属于其父元素下的第1个子元素

print (driver.find_element_by_css_selector("option:first-child").text)

4）:last-child

匹配属于其父元素下的最后1个子元素

:last-child 匹配属于其父元素下的最后1个子元素

print (driver.find_element_by_css_selector('option:last-child').text)