selenium07-css选择器初识

css选择器是浏览器用来选择元素的,同样我们selenium也可以使用css选择器语法来选择 web 元素。 本篇主要就css选择器基本用法进行展开,包括根据tag/id/class以及组合方式选择元素和通过css后代选择器选择元素。希望感兴趣的小伙伴可以坚持看下去同时欢迎提出宝贵的意见让我们一起进步！

01：css概述

1）作用：装饰和美化页面元素,实现网页的排版布局,CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。
2）优点：执行效率高
3）方式：元素内联、页面嵌入和外部引入

有如下的html片段：
<div id="food" style="margin-top:10px;color:red">
    <span class="vegetable good">黄瓜</span>
    <span class="meat">牛肉</span>
    <p class="vegetable">南瓜</p>
    <p class="vegetable">青菜</p>
</div>
<div id="food2" style="margin-top:10px">
    <span class="vegetable">萝卜</span>
    <span class="meat">鸡肉</span>
</div>
<select id="choose_car">
    <option value="volvo">沃尔沃</option>
    <option value="corolla">卡罗拉</option>
    <option value="fiat">红旗</option>
    <option value="audi">奥迪</option>
</select>

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

02：根据tag名选择元素

（1）需求点：选择所有的p元素 
p=driver.find_elements_by_css_selector('p')
for one in p:
    print(one.text)
运行结果如下：
南瓜
青菜

03：根据id选择元素（#）

格式：driver.find_elements_by_css_selector('#food')

（1）需求点：选择ID为choose_car的所有元素 
food=driver.find_elements_by_css_selector('#choose_car')
for one in food:
    print(one.text)
运行结果如下：
    沃尔沃
    卡罗拉
    菲亚特
    奥迪

04：根据class选择元素（.）

格式：driver.find_elements_by_css_selector('.vegetable')

（1）需求点：选择class为vegetable所有元素
vegetable=driver.find_elements_by_css_selector('.vegetable')
for one in vegetable:
    print(one.text)
运行结果如下：
黄瓜
南瓜
青菜
萝卜

注意有的元素有两个class值：表示这个元素有两个class值, 而不是一个vegetable good整体的属性

cucumber=driver.find_element_by_css_selector('.good')#选择class为good的元素
cucumber=driver.find_element_by_css_selector('.vegetable')#选择class为vegetable的元素
print(cucumber.text)
运行结果如下：
黄瓜

05：根据组合选择元素（元素.属性）

vegetable=driver.find_elements_by_css_selector('p.vegetable')

（1）需求点：选择P元素的vegetable属性
vegetable=driver.find_elements_by_css_selector('p.vegetable')
for one in vegetable:
    print(one.text)
运行结果如下：
南瓜
青菜

06：css后代选择器

<div id="many">
        <p>小可爱会数数</p>
        <div>
            <p class="special" name="p1">one</p>
            <p>two</p>
            <p class="special">three</p>
        </div>
    </div>

①语法：<s1> <s2>

②解释：表示选择s1元素里面所有的s2元素, S2可以是S1的直接子节点,也可以不是。其中<s1> <s2>可以是我们前面学过的css 根据tag名、id 、class 描述的任何语法

③实例：many=driver.find_elements_by_css_selector('#many p')

④注意：后代选择器会选择元素内部所有子元素

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

07：根据css后代选择器组合选择元素

（3）需求点：选择id=many下的div中的p元素属性为special的元素
special=driver.find_element_by_css_selector('#many div p.special ')
print(special.text)
运行结果如下：
one

想要更好的掌握还需要多加练习,希望所有的人都能取得不一样的进步！Fighting