当前位置: 首页 > news >正文

自动化测试——css元素定位

在这里插入图片描述


文章目录

  • 一、css定位场景
  • 二、css相对定位的优点
  • 三、css的调试方法
    • 1、表达式中含有字符串:表达式中的引号一定和外面字符串的引号相反
  • 四、css基础语法
    • 1、标签定位
    • 2、class定位
    • 特别注意:当class类型的属性值包含多个分割值,$('.s_tab s_tab_1z9nv')不适用。
    • 解决方法:将空格替换为. $('.s_tab.s_tab_1z9nv')
    • 3、id定位
    • 4、属性表达式
  • 五、css关系定位
    • 1、并集
    • 2、临近兄弟(平级、挨着)
    • 3、兄弟(平级、不挨着)
    • 4、父子关系
    • 后代(用的多)
  • 六、css的顺序关系
    • 父子关系+顺序

一、css定位场景

1、支持web产品
2、支持app端的webview(原生的不支持)

二、css相对定位的优点

1、可维护性强
2、语法更加简洁
3、解决各种复杂的定位场景

三、css的调试方法

css定位的3要素:$、小括号、字符串(单引号、双引号都支持)
进入浏览器console
输入:$("css表达式")或者$$("css表达式")

1、表达式中含有字符串:表达式中的引号一定和外面字符串的引号相反

四、css基础语法

类型表达式
标签标签名
.class属性值
id#id属性值
属性[属性名=’属性值‘]

在这里插入图片描述

1、标签定位

支持索引
在这里插入图片描述

2、class定位

在这里插入图片描述

特别注意:当class类型的属性值包含多个分割值,$(‘.s_tab s_tab_1z9nv’)不适用。

在这里插入图片描述

解决方法:将空格替换为. $(‘.s_tab.s_tab_1z9nv’)

在这里插入图片描述

3、id定位

在这里插入图片描述

4、属性表达式

在这里插入图片描述

五、css关系定位

类型表达式
并集元素,元素
临近兄弟元素+元素
兄弟元素1~元素2
父子元素>元素
后代元素 元素

1、并集

在这里插入图片描述

2、临近兄弟(平级、挨着)

在这里插入图片描述
$('#lg+#result_logo')

在这里插入图片描述

3、兄弟(平级、不挨着)

在这里插入图片描述
$('#lg~#form')

在这里插入图片描述

4、父子关系

可以一直嵌套下去
局限性:不稳定

$('#head>.head_wrapper')

在这里插入图片描述

后代(用的多)

$('#head #lg')
在这里插入图片描述
可以一直嵌套下去
$('#head .s_form #lg')
在这里插入图片描述

六、css的顺序关系

类型表达式
父子关系+顺序元素 元素
父子关系+标签类型+顺序元素 元素

在这里插入图片描述

父子关系+顺序

$('#wrapper>div:nth-of-type(1)')
在这里插入图片描述


在这里插入图片描述

http://www.lryc.cn/news/16270.html

相关文章:

  • ChatGPT可能马上取代你,这是它能做的十个工作
  • ubuntu转储coredump
  • 基于单片机的毕业设计推荐
  • APP测试中ios和androis的区别,有哪些注意点
  • 使用 Xcode 创建第一个 Objective-C 命令行程序 HelloWorld
  • 【蓝桥杯集训8】哈希表专题(3 / 3)
  • Java Scanner 类,超详细整理,适合新手入门
  • 干货 | 中小企业选型 Elasticsearch 避坑指南
  • 全局组件和局部组件
  • 提取括号中的内容
  • 数据结构-算法的空间复杂度(1.2)
  • 【总结】python3启动web服务引发的一系列问题
  • Linux:基于libevent读写管道代码,改进一下上一篇变成可以接收键盘输入
  • C语言格式化输出总结:%d,%c,%s,%f, %lf,%m.nd,%m.nf,%m.ns 以及sprintf函数
  • Nginx之反向代理、负载均衡、动静分离。
  • 0401不定积分的概念和性质-不定积分
  • 数组中的各种迭代API方法手写
  • 详解量子计算:相位反冲与相位反转
  • C++——C++11第三篇
  • 180 2 22222
  • 成人高考初中毕业能报名吗 需要什么条件
  • ChatGPT初体验
  • ChatGPT概念狂飙!究竟魅力何在?
  • 如何下载阅读Spring源码-全过程详解
  • 学了两个月的Java,最后自己什么也不会,该怎么办?
  • 前端vue实现获取七天时间和星期几功能
  • zookeeper单机部署
  • 单片机输入输出模式
  • 数据结构_ 堆结构与堆排序(c++ 实现 + 完整代码 )
  • 【MySQL】sql中explain解释和应用