selenium08-css选择器高级用法

上一篇文章讲了一些关于css操作元素的基本方法,本篇将继续就css选择器的高级用法进行展开,包括css子元素选择器、css组选择器和css兄弟选择器(相邻/非相邻)等。希望感兴趣的小伙伴可以坚持看下去同时欢迎提出宝贵的意见让我们一起进步！

有如下的html片段：
<div id="food" style="margin-top:10px;color:red">
    <span class="vegetable good">黄瓜</span>
    <span class="meat">牛肉</span>
    <p class="vegetable">青菜</p>
</div>
<select id="choose_car">
    <option value="fiat">红旗</option>
    <option value="audi">奥迪</option>
</select>
<div id="many">
        <p>小可爱会数数</p>
        <div>
            <p class="special" name="p1">one</p>
            <p>two</p>
            <p class="special">three</p>
            <p>
                <span>test1</span>
                <span>test2</span>
            </p>
        </div>
    </div>

前置条件：
from selenium import webdriver
driver=webdriver.Chrome()
driver.implicitly_wait(5)
driver.get('file:///C:/Users/qin/Desktop/3.html')

01：css子元素(child)选择器（>）

1）概述：选择同一个父元素下的子元素

2）后代选择器与子元素选择器不同点：主要在于选择器是否只选择同一父元素的直接子元素。

①后代元素：所有具有相同祖先的元素（包括子元素选择器）

②子元素：所有具有相同parent的元素（范围小于后代元素选择器）

3）语法：<s1>大于号<s2>;S1与s2是父子关系.比如#choose_car>choose_car

4）多级使用实例：#many>div>p>span

5）组合使用实例：#many p>span

6）使用场景：不同于后代选择器,只选择同一父元素的直接子元素

需求实现点：选择id=many的span元素

（1）通过后代选择器和子元素选择器区别

（1.1）通过后代选择器
span=driver.find_elements_by_css_selector('#many span')
for one in span:
    print(one.text)
运行结果如下：
test1
test2
（1.2）通过子元素选择器
span=driver.find_elements_by_css_selector('#many>span')
for one in span:
    print(one.text)
运行结果为：null。是因为子元素选择器只能选择“同一个父元素下的元素”

（2）通过逐层连续使用

span=driver.find_elements_by_css_selector('#many>div>p>span')
for one in span:
    print(one.text)
运行结果如下：
test1
test2

（3）通过与后代选择器组合使用

span=driver.find_elements_by_css_selector('#many p>span')
for one in span:
    print(one.text)
运行结果如下：
test1
test2

02：css组(group)选择器

1）概述：族选择器可以同时选择多个元素,用逗号隔开

2）语法： <s1>,<s2>; <s1>与<s2>表示两组不同的css选择器

3）实例：#food>span,option

4）使用场景：当一组选择器无法选择我们需要的元素,可以通过多组选择器来选择元素

（1）选择id=many和id=food下的所有元素

group=driver.find_elements_by_css_selector('#many,#food')
for one in group:
    print(one.text)
运行结果如下：
黄瓜 牛肉
青菜
小可爱会数数
one
two
three
test1 test2

（2）组选择器与后代选择器组合使用

（1.1）需求点：选择id为food的所有span子元素和所有的option
group=driver.find_elements_by_css_selector('#food>span,option')
for one in group:
    print(one.text)
运行结果如下：
黄瓜
牛肉
红旗
奥迪
（1.2）需求点：选择 id为food的所有span子元素和所有的p子元素
group=driver.find_elements_by_css_selector('#food>span,#food>p')
for one in group:
    print(one.text)
运行结果如下：
黄瓜
牛肉
青菜

（3）选择id为food的所有子元素（*）

group=driver.find_elements_by_css_selector('#food >*')
for one in group:
    print(one.text)
运行结果如下：
黄瓜
牛肉
青菜

03：css相邻兄弟选择器（+）

1）概述：选择紧邻在另一个元素后的元素,二者有相同的父元素

2）语法：<s1>+<s2> ; <s1>与<s2>是同级关系并且紧靠一起

3）实例：#food+select

4）使用场景：同一父元素的相邻子元素,两者挨在一起

5）注意事项：无法通过父元素定位到子元素 ; 无法通过兄弟节点定位到前面的节点元素（向后寻找）

（1）需求点：选择与id为food的相邻select节点元素
brother=driver.find_element_by_css_selector('#food+select')
print(brother.text)
运行结果如下：
    红旗
    奥迪
（2）需求点：选择与span元素相邻的P元素
brother=driver.find_element_by_css_selector('span+p')
print(brother.text)
运行结果如下：青菜
（3）需求点：选择id为many下P元素属性为special的相邻P元素
brother=driver.find_elements_by_css_selector('#many p.special+p')
for one in brother:
    print(one.text)
运行结果如下：
two
test1 test2

04：css非相邻兄弟选择器（~）

1）概述：选择非紧邻在另一个元素后的元素,二者有相同的父元素

2）语法：<s1>~<s2> ; <s1>与<s2>是同级关系无需紧靠一起

3）实例：#food~many

4）使用场景：同一父元素的子元素,元素之间没有紧靠在一起

5）注意事项：无法通过父元素定位到子元素 ; 无法通过兄弟节点定位到前面的节点元素（向后寻找）

（1）需求点：选择与id为food的非相邻的div节点元素
brother=driver.find_element_by_css_selector('#food~div')
print(brother.text)
运行结果如下：
小可爱会数数
one
two
three
test1 test2
（2）选择id为many下P元素属性为special的非相邻P元素
brother=driver.find_elements_by_css_selector('#many p.special~p')
for one in brother:
    print(one.text)
运行结果如下：
two
three
test1 test2

05：伪类nth-child,nth-of-type

1）伪类nth-child表示：<s1>:nth-child(n)表示从<s1>中选择第n个元素且<s1>表示的元素必须位于父元素的第n位

2）伪类nth-of-type表示：<s1>:nth-of-type(n)表示从<s1>中选择第n个元素,对<s1>表示的元素处于第几位没有要求

3）使用场景：根据下标选择子元素,下标从1开始

（1）伪类nth-child表示方法
ele=driver.find_element_by_css_selector('#choose_car>:nth-child(2)')
print(ele.text)
运行结果如下：奥迪
（2）伪类nth-of-type表示方法
ele=driver.find_element_by_css_selector('#choose_car>:nth-of-type(1)')
print(ele.text)
运行结果如下：红旗