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教程之倾斜页面
Jan 27 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php教程之phpize使用方法
2014/02/12 PHP
yii中widget的用法
2014/12/03 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
一端时间轮换的广告
2006/06/26 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python三引号如何输入
2020/07/06 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
婚前协议书怎么写
2014/04/15 职场文书
政风行风评议整改方案
2014/09/15 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
redis 限制内存使用大小的实现
2021/05/08 Redis
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
MySQL优化之慢日志查询
2022/06/10 MySQL