前面我们看到了根据 id、class属性、tag名 选择元素。
如果我们要选择的 元素 没有id、class 属性，或者有些我们不想选择的元素 也有相同的 id、class属性值，怎么办呢？
这时候我们通常可以通过CSS selector语法选择元素
.后面为class内容，代表animal属性
通过 CSS Selector 选择单个元素的方法是
find_element_by_css_selector(CSS Selector参数)
选择所有元素的方法是
find_elements_by_css_selector(CSS Selector参数)
练习
from selenium import webdriver
# 启动浏览器
wb = webdriver.Chrome()
# 设置最大等待时长为 10秒
wb.implicitly_wait(10)
# 打开网址
wb.get('http://cdn1.python3.vip/files/selenium/sample1.html')
# 选择元素 id属性
element = wb.find_elements_by_css_selector('.animal')
for i in element:
print(i.text)
print(element[0].get_attribute('outerHTML'))
之前的根据 tag名、id、class 选择元素的方法也可使用css selector进行选择
- tag名（直接填写）
-
class属性（.class）
-
id（#id）
id 为 container 的div元素 包含了 id 为 layer1 和 layer2 的两个div元素。
这种包含是直接包含， 中间没有其他的层次的元素了。 所以 id 为 layer1 和 layer2 的两个div元素 是 id 为 container 的div元素 的 直接子元素
而 id 为 layer1 的div元素 又包含了 id 为 inner11 和 inner12 的两个div元素。 中间没有其他层次的元素，所以这种包含关系也是 直接子元素 关系
id 为 layer2 的div元素 又包含了 id 为 inner21 这个div元素。 这种包含关系也是 直接子元素 关系
而对于 id 为 container 的div元素来说， id 为 inner11 、inner12 、inner22 的元素 和 两个 span类型的元素 都不是 它的直接子元素， 因为中间隔了 几层。
虽然不是直接子元素， 但是 它们还是在 container 的内部， 可以称之为它 的 后代元素
后代元素也包括了直接子元素， 比如 id 为 layer1 和 layer2 的两个div元素 也可以说 是 id 为 container 的div元素 的 直接子元素，同时也是后代子元素
css 选择器支持通过任何属性来选择元素，语法是用一个方括号[ ] 。
- 根据href来进行查找
这个表达式的意思是，选择 属性href值为 http://www.miitbeian.gov.cn 的元素。
[href=“http://www.miitbeian.gov.cn”]
- 多个属性
沙漠之鹰
CSS 选择器 可以指定 选择的元素要 同时具有多个属性的限制，像这样
div[class=misc][ctype=gun]
练习
获取搜索selenium页面的每条连接和名称
from selenium import webdriver
# 启动浏览器
wb = webdriver.Chrome()
# 设置最大等待时长为 10秒
wb.implicitly_wait(10)
# 打开网址
wb.get('https://www.baidu.com/')
# 隐式等待
wb.implicitly_wait(10)
# 找到输入框
element = wb.find_element_by_id('kw')
# 搜索selenium
element.send_keys('selenium')
# 找到搜索按钮
wb.find_element_by_id('su').click()
# css选择器
elements = wb.find_elements_by_css_selector('div[id="content_left"]>div>h3>a')
for i in elements:
print("标题：",i.text,"内容：",i.get_attribute("href"))
wb.close()
只看第一条
elements = wb.find_element_by_css_selector('div[id="content_left"] h3>a')
print("标题：", elements.text, "内容：", elements.get_attribute("href"))
2.3 css选择器验证
谷歌浏览器自带查找，然后看写的选择器是不是正确。
CSS selector的另一个强大之处在于： 选择语法 可以联合使用
比如， 我们要选择 网页 html 中的元素 版权
div.footer1 > span.copyright
就是 选择 一个class 属性值为 copyright 的 span 节点， 并且要求其 必须是 class 属性值为 footer1 的 div节点 的子节点
其他简写方法：
2.5 组选择 逗号.footer1 > .copyright
.footer1 .copyright
选择唐诗中所有的作者和作品
逗号的优先级很低
若写成#t1>span,p 则会被认为t1下所有的span和页面上所有的p。则t2中的p也会被算进去。
span:nth-child(2)
我们可以指定选择的元素 是父元素的第几个子节点使用nth-child如选择 唐诗 和宋词 的第一个 作者，也就是说 选择的是 第2个子元素，并且是span类型所以这样可以这样写 span:nth-child(2)，
p:nth-last-child(1)
只有1个因为t1的倒数第二个元素不是p
2.6.4 父元素的倒数第几个某类型的子节点span:nth-of-type(1)
2.6.5 奇数节点even和偶数节点oddp:nth-last-of-type(2)
如果要选择的是父元素的 偶数节点，使用 nth-child(even)
p:nth-child(even)
如果要选择的是父元素的 奇数节点，使用 nth-child(odd)
p:nth-child(odd)
参考博客：http://www.byhy.net/tut/auto/selenium/02/
参考视频：https://www.bilibili.com/video/BV1Z4411o7TA?p=9
