selenium09-css属性选择器

上一篇文章讲了一些关于css子元素/组/兄弟选择器的操作元素的基本方法,本篇将继续讲解css一个重要的选择器“css属性选择器”。希望感兴趣的小伙伴可以坚持看下去同时欢迎提出宝贵的意见让我们一起进步！
css属性选择器

01：css属性选择器

1）概述：可以根据元素的属性及属性值来选择元素

2）语法：[属性=”属性值”]; 星号表示任意元素标签名; 通常属性值没有空格或特殊字符可以不加引号

3）实例：*[style]

4）使用场景：选择具有某个属性（值）的元素

有如下的html片段：
<div id="food" style="margin-top:10px;color:red">
    <span class="vegetable good">黄瓜</span>
    <span class="meat">牛肉</span>
    <p class="vegetable">青菜</p>
</div>
<div>
<a href="javascript:void(0);" onclick="kwdtypeChangeResult(1);">公司</a>
<button onclick="kwdGoSearch($('#kwdselectid1').val());">搜索按钮1</button>
<button onclick="kwdGoSearch($('#kwdselectid2').val());">搜索按钮2</button>
</div>
<div id="many">
        <p>小可爱会数数</p>
        <div>
            <p class="special" name="p1">one</p>
            <p name="p2">two</p>
            <p class="special">three</p>
        </div>
    </div>

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

02：选择具有某(style)属性的任意元素（*）

ele=driver.find_element_by_css_selector('*[style]')
print(ele.text)
运行结果如下：
黄瓜 牛肉
青菜

03：选择id为many下某(name)属性的所有元素

ele=driver.find_elements_by_css_selector('#many p[name]')
for one in ele:
    print(one.text)
运行结果如下：
one
two

04：选择特定的元素

①单属性匹配元素：p[属性=”属性值”]

②多属性匹配元素：p[属性=”属性值”][属性=”属性值”]

③=表示属性值完全匹配

ele=driver.find_element_by_css_selector('#many p[name="p1"]')方法1
ele=driver.find_element_by_css_selector('#many p[name="p1"][class="special"]')方法2
print(ele.text)
运行结果如下：one

05：选择所有含某(kwd)属性的所有元素 [属性*=”部分属性值”]

kwd=driver.find_elements_by_css_selector('[onclick*="kwd"]')
for one in kwd:
    print(one.text)
运行结果如下：
公司
搜索按钮1
搜索按钮2

06：选择所有带某(kwd)属性开头的所有元素 [属性^=”开头属性值”]

kwd=driver.find_elements_by_css_selector('[onclick^="kwd"]')
for one in kwd:
    print(one.text)
运行结果如下：
公司
搜索按钮1
搜索按钮2

07：选择所有带某(kwd)属性结尾的所有元素 [属性$=”结尾属性值”]

kwd=driver.find_elements_by_css_selector('[onclick$="val());"]')#button指元素类型
for one in kwd:
    print(one.text)
运行结果如下：
搜索按钮1
搜索按钮2

08：验证css选择器

①打开控制台,element标签内查找,会做字符匹配。比如：button[onclick$="val());"]

②打开控制台,console内查找,更精确。比如：$$('button[onclick$="val());"]')

element标签内查找.png console内查找.png

09：利用浏览器开发工具获取css seletor

对于不太好找的CSS selector的元素,我们可以通过浏览器开发工具帮助我们定位。

①在chrom浏览器里按F12,打开开发工具窗口,点击element标签;
②在网页窗口里面点选我们要选择的元素,开发工具窗口会高亮显示该元素对应的html tag代码;
③用鼠标右键点击该代码,在弹出的对话框中依次选择Copy -->Copy selector

利用浏览器开发工具获取css seletor