（四）自动化测试之selenium学习心得-CSS表达式2
上一章学习了css选择器的基本使用，这一章继续深入学习哦
1.选择语法 可以 联合使用
比如， 我们要选择 网页 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>
我们可以这样写：
1.1、 .copyright
联合使用是这样写：
1.2、div .footer1 > span.copyright
或者写成： .footer1 > .copyright 或者 .footer1 .copyright
2、组选择
css选择器可以 使用 逗号 ，称之为 组选择
2.1、 .plant, .animal
2.2、我们要选择所有 唐诗里面的作者和诗名， 也就是选择所有 id 为 t1 里面的 span 和 p 元素
这样写：#t1>span, #t1> p
3、按次序选择子节点
对应的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>
3.1、父元素的第n个子节点
我们可以指定选择的元素 是父元素的第几个子节点
使用 nth-child
比如，
我们要选择 唐诗 和宋词 的第一个 作者，
也就是说 选择的是 第2个子元素，并且是span类型
这样写：span:nth-child(2)
如果你不加节点类型限制，直接这样写 :nth-child(2)
就是选择所有位置为第2个的所有元素，不管是什么类型
3.2、父元素的倒数第n个子节点
比如：p:nth-last-child(1)
就是选择第倒数第1个子元素，并且是p元素
3.3、父元素的第几个某类型的子节点
我们可以指定选择的元素 是父元素的第几个 某类型的 子节点
使用 nth-of-type
比如，
我们要选择 唐诗 和宋词 的第一个 作者，
可以像上面那样思考：选择的是 第2个子元素，并且是span类型
所以这样可以这样写 span:nth-child(2) ，
还可以这样思考，选择的是 第1个span类型 的子元素
所以也可以这样写 span:nth-of-type(1)
3.4、父元素的倒数第几个某类型的子节点
当然也可以反过来， 选择父元素的 倒数第几个某类型 的子节点
使用 nth-last-of-type
像这样
p:nth-last-of-type(2)
3.5、奇数节点和偶数节点
如果要选择的是父元素的 偶数节点，使用 nth-child(even)
比如
p:nth-child(even)
如果要选择的是父元素的 奇数节点，使用 nth-child(odd)
p:nth-child(odd)
如果要选择的是父元素的 某类型偶数节点，使用 nth-of-type(even)
如果要选择的是父元素的 某类型奇数节点，使用 nth-of-type(odd)
4、兄弟节点选择
4.1、相邻兄弟节点选择
上面的例子里面，我们要选择 唐诗 和宋词 的第一个 作者
还有一种思考方法，就是选择 h3 后面紧跟着的兄弟节点 span。
这就是一种 相邻兄弟 关系，可以这样写 h3 + span
表示元素 紧跟关系的 是 加号
4.2、后续所有兄弟节点选择
如果要选择是 选择 h3 后面所有的兄弟节点 span，可以这样写 h3 ~ span
浙公网安备 33010602011771号