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 相关文章推荐
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 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 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
美国渔具店:FishUSA
2019/08/07 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
"引用"与多态的关系
2013/02/01 面试题
小学语文教学反思
2014/02/10 职场文书
大学秋游活动方案
2014/02/11 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
工作自我评价范文
2015/03/05 职场文书
同意离婚答辩状
2015/05/22 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python