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。