第六章 CSS选择器之基础篇

CSS介绍

什么是CSS

CSS中文叫层叠样式表,英文全称:Cascading Style Sheets,是一种用来表现HTML文件样式的计算机语言。

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式,包括文档样式外观、字体选择、字体大小、字体颜色、对齐方式、设置背景、创建边框,指定元素边框与其他元素间的距离,以及其他页面效果。

CSS选择器

什么是CSS选择器?我们经常看见web元素经常会有类似于下面的Style属性

<h1 style="color:red;font-size:14px;">h1 title</h1>

这个style属性定义了元素的显示的样式,比如背景、字体色等。这种直接在web元素属性中定义样式,通常称之为内联样式。除了这种方式以外,还可以使用样式表来定义。

通过CSS样式表来定义显示样式的时候,不必将样式内容和元素放在一起,而是通过选择器来告诉浏览器,我对那个页面元素进行渲染,类似于下面这样:

<style type="text/css">
h1 {
    color:red;
    font-size:14px;
}
</style>

image

例子里面是给一个h1标题定义一个样式,这是一个非常简单的规则,事实上选择器的功能非常强大,选择器的语法可以非常的复杂,后面会逐一给大家介绍。

利用CSS选择器可以实现对HTML页面中的元素一对一,一对多或者多对一的控制。而selenium做web自动化,首要也是选择出元素,所以,就可以可以使用css的选择器语法来选择web元素。

现在的浏览器竞争也非常激烈,为了高效的渲染网页, 浏览器厂商也都在想法设法的提高页面的渲染性能,期望达到比竞争对手更快更好的显示网页。 其中CSS选择也是一项要优化的重点,所以利用css选择元素,效率是非常高的。

CSS选择器的方法

同样还是对如下的页面的元素进行选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SKNet</title>
    <base target="_blank" />
    <style type="text/css">
        div #BYHY {
        color:red;
        font-size:20px;
        }
    </style>
</head>

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

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

    <div>
        <a href="http://www.baidu.com" id="baidu">百度搜索</a><br />
        <a href="http://www.python3.vip" id="BYHY">白月黑羽--在线教程</a><br />
    </div>

    <div>
        <button name='button'>测试按钮1</button><br />
        <button name='button'>测试按钮2</button>
    </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><br>
    </div>
   </body>
</html>

根据ID

ID属性通常是唯一的,可以通过该属性快速选择期望的元素,也是强烈建议的首要选择方式

  • CSS选择器:#ID {属性1:属性值;属性1:属性值;…}
  • Selenium方式:driver.find_element_by_css_selector(‘#ID’)

例如:选择ID为BYHY的a标签页面元素

eleObj = driver.find_element_by_css_selector('#BYHY')
print(eleObj.text)

根据class

  • .classname {属性1:属性值;属性1:属性值;…}
  • Selenium方式:
    1. driver.find_element_by_css_selector(‘.classname’)
    2. driver.find_elements_by_css_selector(‘.classname’)

例如:选择class为SKnet和teacher的元素

# 如果有多个class = SKnet,则选择第一个元素
# 如果没有找到class = SKnet,则返回异常
eleObj = driver.find_element_by_css_selector('.SKnet')
print(eleObj.text)

# 如果有多个class = teacher,返回一个列表
# 如果没有找到class = teacher,则返回一个空列表
eleObjList = driver.find_elements_by_css_selector('.teacher')
for eleObj in eleObjList:
    print(eleObj.text)

根据tag名

  • CSS选择器:tagname {属性1:属性值;属性1:属性值;…}
  • Selenium方式:
    1. driver.find_element_by_css_selector(‘tagname’)
    2. driver.find_elements_by_css_selector(‘tagname’)

例如:选择div标签

# 如果有多个div标签,则选择第一个div标签
# 如果没有div标签,则返回异常
eleObj = driver.find_element_by_css_selector('div')
print(eleObj.text)

# 如果有多个div标签,返回一个列表
# 如果没有div标签,则返回一个空列表
eleObjList = driver.find_elements_by_css_selector('div')
for eleObj in eleObjList:
    print(eleObj.text)

根据属性

  • [attribute]选择具有[ ]内属性的所有元素
  • *[style] 表示选择所有具有style属性的元素
  • div[class=’SKnet’] 选择所有具有div元素且class属性值为SKnet的元素

项目实战

搜索(简单搜索)并列出51job中北京的Python开发的岗位需求

参考答案

#!/usr/bin/env python
# -*- encoding: utf-8 -*-


from selenium import  webdriver
import  time

driver = webdriver.Chrome(r"G:\Education\BYHY\Courseware\Improvement\Selenium\chromedriver.exe")
driver.implicitly_wait(5)
URL = 'https://www.51job.com/'

# open URL
driver.get(URL)
# ==================================================
eleObj = driver.find_element_by_id('kwdselectid').send_keys('python')

eleObj = driver.find_element_by_id('work_position_input').click()
cityList = driver.find_elements_by_css_selector('#work_position_click_center_right_list_000000 em')

for city in cityList:
    cityName = city.text
    selectedOrNot = city.get_attribute('class')
    if cityName == '北京':
        time.sleep(0.5)
        if selectedOrNot != 'on':
            city.click()
    else:
        if selectedOrNot == 'on':
            city.click()

driver.find_element_by_id('work_position_click_bottom_save').click()

driver.find_element_by_css_selector('div[class = "ush top_wrap"] button').click()

# 结果分析
jobList = driver.find_element_by_css_selector('#resultList').find_elements_by_css_selector('.el')
# jobList = driver.find_elements_by_css_selector("#resultList div[class='el']")

for job in jobList:
    jobContent = job.find_elements_by_tag_name('span')
    jobItemsList = []
    for i in jobContent:
        if i != '':
            jobItemsList.append(i.text)
    print(jobItemsList)

# ==================================================
input('Press any key to continue ......')
# Quit
driver.quit()


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

上一页 下一页