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。