Selenium(五)：CSS选择器(二)

1. CSS选择器

1.1 选择语法联合使用

CSS selector的另外一个强大之处在于：选择语法能够联合使用。

html代码：

<div id='bottom'>
    <div class='footer1'>
        <span class='copyright'>版权</span>
        <span class='date'>发布日期：2019-11-26</span>
    </div>
    <div class='footer2'>
        <span>主页
        <a href="https://www.cnblogs.com/liuhui0308/">爱编程的小灰灰</a>
        </span>
    </div>        
</div> 

好比，咱们要选择网页html中的元素

<span class='copyright'>版权</span>

CSS selector表达式能够这样写：

div.footer1 > span.copyright

就是选择一个class属性值为copyright的span节点，而且要求其必须是class属性值为footer1的div节点 的子节点。

也能够更简单：

.footer1 > .copyright

就是选择一个class属性值为copyright的节点（不限类型），而且要求其必须是class属性值为footer1的节点的子节点。

固然这样也是能够的：

.footer1  .copyright

由于子元素同时也是后代元素。

1.2 组选择

若是咱们要同时选择全部class为plant和class为animal的元素。怎么办？

这种状况，css选择器能够使用逗号，称之为组选择，像这样：

.raise , .wolf

再好比，咱们要同时选择全部tag名为div的元素和id为BYHY的元素，就能够像这样写

div,#BYHY

对应的selenium代码以下：

elements = wd.find_elements_by_css_selector('div,#BYHY')
for element in elements:
    print(element.text)

咱们再看一个例子：

html代码：

<div id='t1'>
    <h3> 唐诗 </h3>
    <span>李白</span>
    <p>静夜思</p>
    <span>杜甫</span>
    <p>春夜喜雨</p>    
</div>      

        
<div id='t2'>
    <h3> 宋词 </h3>
    <span>辛弃疾</span>
    <p>北固亭怀古</p>
</div>

咱们要选择全部唐诗里面的做者和诗名，也就是选择全部id为t1里面的span和p元素。


咱们是否是应该这样写呢？

#t1 > span,p

这样是不行的，这样写的意思是选择全部id为t1里面的span和全部的p元素。

只能这样写：

#t1 > span , #t1 > p

1.3 按次序选择子节点

html代码：

<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>

1.3.1 父元素的第n个子节点

咱们能够指定选择的元素是父元素的第几个子节点，使用nth-child。

好比：

咱们要选择唐诗和宋词的第一个做者，

也就是说选择的是第2个子元素，而且是span类型

因此这样能够这样写：

span:nth-child(2)

若是你不加节点类型限制，直接这样写：

:nth-child(2)

就是选择全部位置为第2个的全部元素，无论是什么类型。

1.3.2 父元素的倒数第n个子节点

也能够反过来，选择的是父元素的倒数第n个子节点，使用nth-last-child。

好比：

p:nth-last-child(1)

就是选择第倒数第1个子元素，而且是p元素。

1.3.3 父元素的第几个某类型的子节点

咱们能够指定选择的元素是父元素的第几个某类型的子节点，使用nth-of-type。

好比：

咱们要选择唐诗和宋词的第一个做者，能够像上面那样思考：选择的是第2个子元素，而且是span类型。

因此能够这样写：

span:nth-child(2)

还能够这样思考，选择的是第1个span类型的子元素。

因此也能够这样写：

span-nth-of-type(1)

1.3.4 父元素的倒数第几个某类型的子节点

固然也能够反过来，选择父元素的倒数第几个某类型的子节点，使用nth-last-of-type。

好比：

p:nth-last-of-type(2)

1.3.5 奇数节点和偶数节点

若是要选择的是父元素的偶数节点，使用nth-child(even)。

好比：

p:nth-child(even)

若是要选择的是父元素的奇数节点，使用nth-child(odd)

p:nth-child(odd)

若是要选择的是父元素的某类型偶数节点，使用nth-of-type(even)。

若是要选择的是父元素的某类型奇数节点，使用nth-of-type(odd)。

1.4 兄弟节点选择

1.4.1 相邻兄弟节点选择

上面的例子里面，咱们要选择唐诗和宋词 的第一个做者

还有一种思考方法，就是选择h3后面紧跟着的兄弟节点span。

这就是一种相邻兄弟关系，能够这样写h3+span。

表示元素紧跟关系的是加号。

1.4.2 后续全部兄弟节点选择

若是要选择是选择h3后面全部的兄弟节点span，能够这样写h3 ~ span。