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

- 日理万妓 2024-03-26 12:20 209阅读 0赞

在这里插入图片描述

文章目录

  • 一、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)')
在这里插入图片描述

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读