CSS元素定位之通过元素的标签或者元素的id、class属性定位详解


Posted in HTML / CSS onSeptember 23, 2022

前言

大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观,更好理解一些。

css元素定位方式往往被忽略掉了,其实css元素定位方式也有它的价值;相对于xpath元素定位方式来说,css元素定位方式更快,语法更简洁。

一、css元素定位:通过元素的标签或者元素的id、class属性定位

1、css元素定位方式可以通过元素的id、class、标签这三个常规属性直接定位。

2、举例:如下是百度输入框的的html代码:

<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

①css元素定位使用#号表示id属性,如:#kw

②css元素定位方式使用.表示class属性,如.s_ipt

③css元素定位方式也可以直接使用标签名称,而没有任何标识符,如:input

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

二、css元素定位:通过元素的其它属性定位

1、css元素定位除了可以通过标签、class、id这三个常规属性定位外,也可以通过元素的其它属性定位。例如: 

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

三、css元素定位:通过标签与属性的组合来定位元素 

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

四、css元素定位:通过元素的层级关系来定位

1、css元素定位可以达到类似xpath元素定位通过元素的层级关系来定位,例如:

xpath元素定位: //form[@id='form']/span/input 和 //form[@class='fm']/span/input 也可以用css实现 

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

五、css元素定位:通过元素的并列索引来定位 

1、以下图为例:与四相似。 

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

2、css元素定位也可以通过索引option:nth-child(1)来定位子元素,这点与xpath写法用很大差异,其实很好理解,直接翻译过来就是第几个小孩 

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

六、css元素定位:通过对元素属性的逻辑运算来定位

1、css同样也可以实现逻辑运算,同时匹配两个属性,这里跟xpath不一样,无需写and关键字。

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

七、处理selenium中的css_selector定位元素的模糊匹配问题

① 匹配元素的id属性,先指定一个html标签,然后加上“#”符号,再加上id的属性值。

driver.find_element_by_css_selector('div#ID').click()

②匹配元素的class属性,先指定一个html标签,然后加上“.”符号,再加上class的属性值。

driver.find_element_by_css_selector('div.CLASS').click()

③匹配元素的其他属性。【这里不再是‘.’或者‘#’符号,而是采用了"标签名[属性名=属性值]"的方式定位元素】

driver.find_element_by_css_selector('div[name=NAME]').click()

④组合匹配【支持定位元素对象通过两组或两组以上的属性】

driver.find_element_by_css_selector('div[name=NAME][type=TYPE]').click()

⑤匹配头部

driver.find_element_by_css_selector('div[style^="sp.gif"]').click()

⑥匹配尾部

driver.find_element_by_css_selector('div[style$="sp.gif"]').click()

⑦匹配中间

driver.find_element_by_css_selector('div[style*="sp.gif"]').click()

到此这篇关于CSS元素定位之通过元素的标签或者元素的id、class属性定位的文章就介绍到这了,更多相关css元素定位内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 #HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
详解CSS中postion和opacity及cursor的特性
Aug 14 #HTML / CSS
html网页引入svg图片的4种方式
HTML静态页面获取url参数和UserAgent的实现
Aug 05 #HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 #HTML / CSS
css中:last-child不生效的解决方法
Aug 05 #HTML / CSS
You might like
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
python pymysql库的常用操作
2020/10/16 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
升职自荐信
2013/11/28 职场文书
教学器材管理制度
2014/01/26 职场文书
责任心演讲稿
2014/05/14 职场文书
农村党员干部承诺书
2015/05/04 职场文书
英语导游欢迎词
2015/09/30 职场文书
合同范本之电脑出租
2019/08/13 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS