第七章 CSS选择器之高级篇

组合选择

对如下的web进行选择,可以复制到本地

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SKNet</title>
    <base target="_blank" />
    <style type="text/css">
        p:nth-of-type(2){
        color:red;
        font-size:20px;
        background-color:yellow;
        }
    </style>
</head>

<body>
    <h3>Web元素选择测试界面</h3>
    <p>欢迎来到思凯网络学院</p>
    <p>欢迎来到思凯网络 - 思凯网络,专注起点</p>
    <hr />

    <div style="background-color:#99FFFF; color:black; padding:10px; font-family:Comic Sans MS; font-size:16px; text-align:left;">
        <p>段落:我们为什么推荐编程0基础的朋友从<span>python</span>入手学习编程语言? 为什么不是Java、C、C++、Javascript?因为<span>Python</span>> 易学好用。</p>
        <span>Python</span> 的创造者们,创建出<span>Python</span> 语言,出发点就是希望它 既 简单易用 又 高效又强大。 所以天生就携带 易学好用的基因
    </div>

    <div>
        <h4>超链接测试</h4>
        <a href="http://www.baidu.com" id="baidu">百度搜索</a><br />
        <a href="http://www.python3.vip" id="BYHY">白月黑羽--在线教程</a><br />
        <p>这是为了隔离a标签</p>
        <a href="http://www.baidu.com" id="baidu2">百度搜索2</a>
    </div>

    <div>
        <h5>按钮测试</h5>
        <button name='button' id="BT1">测试按钮1</button><br />
        <button name='button' id="BT2">测试按钮2</button>
        <a href="http://www.baidu.com" id="baidu3">百度搜索3</a><br />
    </div>

    <div class="SKnet">
        <p class="teacher">BYHY</p>
        <p class="teacher">SK</p>
        <p class="teacher">小凯老师</p>
        <p class="teacher">小雷老师</p>
    </div>

    <div>
        <p>===========================================</p>
    </div>
   </body>
</html>

后代选择器

选择p元素的所有子孙元素中的span元素

div span {color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('div span')
for eleObj in eleObjList:
    print(eleObj.text)

注意:元素标签之间为空格隔开

子女选择器

选择div所有元素中的span元素

div>span {color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('div>span')
for eleObj in eleObjList:
    print(eleObj.text)

注意:元素标签之间为大于号(>)隔开

组合选择器

选择所有div中的a标签id为BYHY的元素

div a#BYHY{color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('div a#BYHY')
for eleObj in eleObjList:
    print(eleObj.text)

群组选择器

同时选择所有div元素id为BYHY的元素

div,#BYHY{color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('div,#BYHY')
for eleObj in eleObjList:
    print(eleObj.text)

注意:元素标签之间为逗号隔开

相邻兄弟选择器

选择h4元素之后紧跟的a元素

h4+a{color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('h4+a')
for eleObj in eleObjList:
    print(eleObj.text)

注意:元素标签之间为加号连接

后续兄弟选择器

选择h4元素之后所有兄弟关系的a元素,即选择所有具有相同的父元素中在h4元素之后的所有a元素

h4~a{color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('h4~a')
for eleObj in eleObjList:
    print(eleObj.text)

注意:元素标签之间为波浪线连接

否定选择器

选择所有a标签中ID不是BYHY的元素

a:not(#BYHY){color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('a:not(#BYHY)')
for eleObj in eleObjList:
    print(eleObj.text)

nth-child选择器

p:first-child

选择属于其父元素的首个子元素为P的所有P元素

p:first-child{color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:first-child')
for eleObj in eleObjList:
    print(eleObj.text)

p:last-child

选择属于其父元素的最后一个子元素为P的每个p元素

p:last-child{color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:last-child')
for eleObj in eleObjList:
    print(eleObj.text)

p:only-child

选其父元素的只有唯一一个子元素且元素为P的每个 p 元素

p:only-child{color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:only-child')
for eleObj in eleObjList:
    print(eleObj.text)

p:nth-child(n)

选择属于其父元素的第二个子元素为P元素的每个P元素

p:nth-child(2){color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:nth-child(2)')
for eleObj in eleObjList:
    print(eleObj.text)

p:nth-child(even)

选择属于其父元素的序数为偶数(even)的子元素为P元素的每个P元素

p:nth-child(even){color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:nth-child(even)')
for eleObj in eleObjList:
    print(eleObj.text)

选择属于其父元素的序数为序数为奇数(odd)的子元素为P元素的每个P元素

p:nth-child(odd){color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:nth-child(odd)')
for eleObj in eleObjList:
    print(eleObj.text)

p:nth-last-child(n)

选择属于其父元素的倒数第二个子元素为P元素的所有P元素

p:nth-last-child(2){color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:nth-last-child(2)')
for eleObj in eleObjList:
    print(eleObj.text)

nth-of-type选择器

p:first-of-type

选择属于其父元素的第一个为P元素的所有P元素

p:first-of-type{color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:first-of-type')
for eleObj in eleObjList:
    print(eleObj.text)

p:last-of-type

选择属于其父元素的最后一个为P元素的所有P元素

p:last-of-type{color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:last-of-type')
for eleObj in eleObjList:
    print(eleObj.text)

p:only-of-type

选其父元素只有唯一一个元素且元素为P的每个p元素,如果有多个也不会被选中

p:only-of-type{color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:only-of-type')
for eleObj in eleObjList:
    print(eleObj.text)

p:nth-of-type(n)

选其父元素第二个元素且元素为P的每个p元素,如果有多个也不会被选中

p:nth-of-type(2){color:red;font-size:20px;background-color:yellow;}
eleObjList = driver.find_elements_by_css_selector('p:nth-of-type(2)')
for eleObj in eleObjList:
    print(eleObj.text)

更多CSS选择器的介绍,可以参考CSS 选择器参考手册

项目实战

从百度音乐新歌榜中找到排名上升的音乐 并保存信息(歌手:歌名)

from selenium import  webdriver

driver = webdriver.Chrome(r"G:\Education\BYHY\Courseware\Improvement\Selenium\chromedriver.exe")
driver.implicitly_wait(1)

# open URL
driver.get('http://music.baidu.com/top/new/?pst=shouyeTop')
# ==================================================
# M1: select by selenium
# div = driver.find_element_by_id('songListWrapper')
# liList = div.find_elements_by_tag_name('li')

# M2: select by css selector
liList = driver.find_elements_by_css_selector('#songListWrapper li')

fh = open('songList.txt', 'w', encoding='utf8')

for li in liList:
    upTags = li.find_elements_by_class_name('up')

    if upTags:
        songTitle = li.find_element_by_class_name('song-title ')
        #print(songTitle)
        songNameStr = songTitle.find_element_by_tag_name('a').text
        #print(songNameStr)

        songSinger  = li.find_element_by_class_name('author_list').text
        #print(songSinger)
        print(f'{songSinger}:{songNameStr} ')

        fh.write(f'{songSinger}:{songNameStr} \n')

fh.close()
# ==================================================
input('Please input any key to continue......')
# Quit
driver.quit()


本文还不错? 分享给你的朋友吧

上一页 下一页