简介
CSS选择器是一种用于选择HTML元素的模式。它允许我们根据元素的标签名、类名、ID、属性等属性进行选择。CSS选择器的语法简单而灵活,是前端开发中常用的定位元素的方式。
selenium中的css定位,实际是通过css选择器来定位到具体元素,css选择器来自于css语法。CSS定位有以下显著优点:
- 语法简洁
- 对比其他定位方式,定位效率更快
- 对比其他定位方式,定位更稳定
css选择器语法
基础选择器
选择器 | 格式 | 示例 | 示例说明 | ||
---|---|---|---|---|---|
选择全部 | * | * | 选择全部元素 | ||
标签选择器 | html标签 | p | 选择所有\ 元素 |
||
ID选择器 | #id属性值 | #su | 选择所有id='su'的元素 | ||
类选择器 | .class属性值 | .s_btn | 选择所有class='s_btn'的元素 | ||
属性选择器1 | [属性名] | [type] | 选择所有带type属性的元素 | ||
属性选择器2 | [属性名='属性值'] | [type="submit"] | 选择所有type="submit"的元素 | ||
属性选择器3 | [属性名~='属性值'] | [type~="submit"] | 选择所有type包含"submit"的元素 | ||
属性选择器4 | [属性名\ | ='属性值'] | [type\ | ="submit"] | 选择所有type以"submit"开头的元素 |
备注:某些元素属性有多个值(如class属性),值表现为以空格隔开,使用时需要单个取出使用
组合选择器
组合选择器就是同时使用多个基础选择器,从而更好地筛选出目标元素
选择器 | 格式 | 示例 | 示例说明 |
---|---|---|---|
标签指定属性 | 标签加属性描述 | input#su | 选择所有id='su'的\元素 |
并集 | 元素1,元素2 | div,p | 选择所有\
和\
元素 |
父子 | 元素1>元素2 | div>p | 选择所有父级是\
的\
元素 |
后代 | 元素1 元素2 | div p | 选择\
中的所有\
元素 |
相邻 | 元素1+元素2 | div+p | 选择\
同级后的相邻\
元素 |
同级 | 元素1~元素2 | div~p | 选择\
同级后的所有\
元素 |
伪属性选择器
伪属性选择器是指元素在html中实际并不存在该属性,是由css定义的拓展描述属性
选择器 | 格式 | 示例 | 示例说明
:- | :- | :- | :-
唯一子元素 | :only-child | p:only-child | 选择所有\
元素且该元素是其父级的唯一一个元素
第一子元素 | :first-child | p:first-child | 选择所有\
元素且该元素是其父级的第一个元素
最后子元素 | :last-child | p:last-child | 选择所有\
元素且该元素是其父级的最后一个子元素
顺序选择器 | :nth-child(n) | p:nth-child(2) | 选择所有\
元素且该元素是其父级的第二个子元素
顺序类型选择器 | :nth-of-type(n) | p:nth-of-type(2) | 选择所有\
元素且该元素是其父级的第二个\
元素
倒序选择器 | :nth-last-child(n) | p:nth-last-child(2) | 选择所有\
元素且该元素是其父级的倒数第二个子元素
倒序类型选择器 | :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有\
元素且该元素是其父级的倒数第二个\
元素
使用示例
- 通过
id
选择器查找
通过css定位的id
属性查找百度首页的输入框元素,代码如下:
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
element = driver.find_element(By.CSS_SELECTOR, '#kw')
print(element)
- 通过
class
选择器查找
通过元素的.class
属性值查找元素,我们还是以百度首页的输入框为例,代码如下:
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
element = driver.find_element(By.CSS_SELECTOR, '.s_ipt')
print(element)
- 通过标签定位
我们继续使用百度首页输入框为例,输入框一般有input
标签,代码如下:
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
element = driver.find_element(By.CSS_SELECTOR, 'input')
print(element)
- 层级选择器
根据元素的父子关系来选择,实例:直接子元素层级关系,使用>
号,继续以百度首页的搜索框为例,代码如下:
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
element = driver.find_element(By.CSS_SELECTOR, '.bg.s_ipt_wr > input')
print(element)
注:如果两个元素之间不是直接的子元素关系,我们需要使用空格隔开,当有多级的层级关系时,我们可以使用duoge>
符号,示例如下:
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
element = driver.find_element(By.CSS_SELECTOR, 'form input')
print(element)
------------------------------------
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get("https://www.baidu.com") #打开网页
driver.maximize_window()
element = driver.find_element(By.CSS_SELECTOR, 'form > span > input')
print(element)
总结
CSS定位是非常高效的一种定位方式,代码也非常简洁,相对于xpath定位方法来说,它的定位速度快,在能够使用CSS定位的情况下,推荐使用CSS定位来实现元素的定位。希望本文能够帮到大家!