css表达式-下篇
选择语法联合使用
CSS selector的另一个强大之处在于： 选择语法 可以 联合使用
比如， 我们要选择 网页 html 中的元素 <span class='copyright'>版权</span>
<div id='bottom'>
<div class='footer1'>
<span class='copyright'>版权</span>
<span class='date'>发布日期：2018-03-03</span>
</div>
<div class='footer2'>
<span>备案号
<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>
</span>
</div>
</div>
CSS selector 表达式 可以这样写：
就是 选择 一个class 属性值为 copyright 的 span 节点， 并且要求其 必须是 class 属性值为 footer1 的 div节点 的子节点
也可以更简单：
就是 选择 一个class 属性值为copyright 的节点（不限类型）， 并且要求其 必须是 class 属性值为 footer1 的节点的 子节点
当然 这样也是可以的：
因为子元素同时也是后代元素
组选择
如果我们要 同时选择所有class 为 plant 和 class 为 animal 的元素。怎么办？
这种情况，css选择器可以 使用 逗号 ，称之为 组选择 ，像这样
再比如，我们要同时选择所有tag名为div的元素 和 id为BYHY的元素，就可以像这样写
对应的selenium代码如下
elements = wd.find_elements(By.CSS_SELECTOR, 'div,#BYHY')
for element in elements:
print(element.text)
我们再看一个例子
打开这个网址 请点击打开这个网址
我们要选择所有 唐诗里面的作者和诗名， 也就是选择所有 id 为 t1 里面的 span 和 p 元素
我们是不是应该这样写呢？
不行哦，这样写的意思是 选择所有 id 为 t1 里面的 span 和 所有的 p 元素
只能这样写
另外注意：组选择结果列表中，选中元素排序， 不是 组表达式的次序， 而是符合这些表达式的元素，在HTML文档中的出现的次序。
按次序选择子节点
对应的html如下，关键信息如下
<body>
<div id='t1'>
<h3> 唐诗 </h3>
<span>李白</span>
<p>静夜思</p>
<span>杜甫</span>
<p>春夜喜雨</p>
</div>
<div id='t2'>
<h3> 宋词 </h3>
<span>苏轼</span>
<p>赤壁怀古</p>
<p>明月几时有</p>
<p>江城子·乙卯正月二十日夜记梦</p>
<p>蝶恋花·春景</p>
<span>辛弃疾</span>
<p>京口北固亭怀古</p>
<p>青玉案·元夕</p>
<p>西江月·夜行黄沙道中</p>
</div>
</body>
父元素的第n个子节点
我们可以指定选择的元素 是父元素的第几个子节点
使用 nth-child
比如，
我们要选择 唐诗 和宋词 的第一个 作者，
也就是说 选择的是 第2个子元素，并且是span类型
所以这样可以这样写 span:nth-child(2) ，
如果你不加节点类型限制，直接这样写 :nth-child(2)
就是选择所有位置为第2个的所有元素，不管是什么类型
学员对nth-child的含义很容易产生误解，请点击这里，观看白月黑羽给实战班学员答疑讲解 nth-child
父元素的倒数第n个子节点
也可以反过来， 选择的是父元素的 倒数第几个子节点 ，使用 nth-last-child
比如：
就是选择第倒数第1个子元素，并且是p元素
父元素的第几个某类型的子节点
我们可以指定选择的元素 是父元素的第几个 某类型的 子节点
使用 nth-of-type
比如，
我们要选择 唐诗 和宋词 的第一个 作者，
可以像上面那样思考：选择的是 第2个子元素，并且是span类型
所以这样可以这样写 span:nth-child(2) ，
还可以这样思考，选择的是 第1个span类型 的子元素
所以也可以这样写 span:nth-of-type(1)
父元素的倒数第几个某类型的子节点
当然也可以反过来， 选择父元素的 倒数第几个某类型 的子节点
使用 nth-last-of-type
像这样
奇数节点和偶数节点
如果要选择的是父元素的 偶数节点，使用 nth-child(even)
比如
如果要选择的是父元素的 奇数节点，使用 nth-child(odd)
如果要选择的是父元素的 某类型偶数节点，使用 nth-of-type(even)
如果要选择的是父元素的 某类型奇数节点，使用 nth-of-type(odd)
兄弟节点选择
相邻兄弟节点选择
上面的例子里面，我们要选择 唐诗 和宋词 的第一个 作者
还有一种思考方法，就是选择 h3 后面紧跟着的兄弟节点 span。
这就是一种 相邻兄弟 关系，可以这样写 h3 + span
表示元素 紧跟关系的 是 加号
后续所有兄弟节点选择
如果要选择是 选择 h3 后面所有的兄弟节点 span，可以这样写 h3 ~ span
更多CSS选择器的介绍，可以参考CSS 选择器参考手册
您需要高效学习，找工作？ 点击咨询 报名实战班
点击查看学员就业情况
课后练习
打开前面练习下载的 白月SMS系统的测试用例文档，白月SMS系统的 安装步骤 可以参考 课程1的课后练习
完成用例 UI-0105 的自动化
实战班学员 ，请联系老师获取参考答案和视频讲解
游客 也可以 分享课程 领取练习视频讲解，点击这里查看
补充练习
实战班学员请联系老师获取补充练习题