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

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

![在这里插入图片描述][31e0667ba97845dfa13d42c435dd9710.jpeg_pic_center]

--------------------

#### 文章目录 ####

*  一、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基础语法 ##

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>表达式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>标签</td> 
   <td>标签名</td> 
  </tr> 
  <tr> 
   <td>类</td> 
   <td>.class属性值</td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td>#id属性值</td> 
  </tr> 
  <tr> 
   <td>属性</td> 
   <td>[属性名=’属性值‘]</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][97d636e8c28e489aab0cf7a49aec687b.png]

### 1、标签定位 ###

**支持索引**  
![在这里插入图片描述][aae8fbe2620c4a54aa3f0ba3220d1d08.png]

### 2、class定位 ###

![在这里插入图片描述][9a9d0825f8754c76ad125f931796d948.png]

### 特别注意：当class类型的属性值包含多个分割值，$(‘.s\_tab s\_tab\_1z9nv’)不适用。 ###

![在这里插入图片描述][770ed8d735ce4c53983b83c8fbcf3722.png]

### 解决方法：将空格替换为. $(‘.s\_tab.s\_tab\_1z9nv’) ###

![在这里插入图片描述][11e7d895e5c64d599e2f6b295c781843.png]

### 3、id定位 ###

![在这里插入图片描述][a9f5a5e8d74d4473ae37e44400348a7f.png]

### 4、属性表达式 ###

![在这里插入图片描述][095ccf0ea62c48058041f8894fca7453.png]

## 五、css关系定位 ##

### 1、并集 ###

![在这里插入图片描述][e8ae2d7a3f7a46c28c2bea13917d2a20.png]

### 2、临近兄弟（平级、挨着） ###

![在这里插入图片描述][fc85d7bfc0634547834236b0ec540ab4.png]  
**`$('#lg+#result_logo')`**

![在这里插入图片描述][cb6e770f7e7549e7afd236bd809c0c1b.png]

### 3、兄弟（平级、不挨着） ###

![在这里插入图片描述][940c0d300b5b489f9640c603f39a027f.png]  
**`$('#lg~#form')`**

![在这里插入图片描述][9e22ac0137184f9c9ef29e57e0261867.png]

### 4、父子关系 ###

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

**`$('#head>.head_wrapper')`**

![在这里插入图片描述][d421332be8854c3ab8189cf0169dbe75.png]

### 后代（用的多） ###

**`$('#head #lg')`**  
![在这里插入图片描述][08d480801a554fc684c055e41293b8d0.png]  
可以一直嵌套下去  
**`$('#head .s_form #lg')`**  
![在这里插入图片描述][a1fd128fa832475c8d2d4b2679d2d76e.png]

## 六、css的顺序关系 ##

![在这里插入图片描述][e481fea3e9c64161abc18add687d432e.png]

### 父子关系+顺序 ###

**`$('#wrapper>div:nth-of-type(1)')`**  
![在这里插入图片描述][91ceb2fc5d804c018af8dee545267d3a.png]

--------------------

![在这里插入图片描述][b2c24b9d1a644546b1385ee09d316835.jpeg_pic_center]

[31e0667ba97845dfa13d42c435dd9710.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8f38c87e9af94534acfda7d01b3cc3a2.png
[97d636e8c28e489aab0cf7a49aec687b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fca33845f86745d88fec005dac12d3ab.png
[aae8fbe2620c4a54aa3f0ba3220d1d08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ff37ad36b7254f9d90592d1b9b29cef6.png
[9a9d0825f8754c76ad125f931796d948.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4609909dbcc249d0b8c5ed9b285e5f9f.png
[770ed8d735ce4c53983b83c8fbcf3722.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d63bfa9cc4094c99893fba17502d7533.png
[11e7d895e5c64d599e2f6b295c781843.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0a6edc212f85471985908847c93e8a08.png
[a9f5a5e8d74d4473ae37e44400348a7f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/756d5d1ef8794cafb80a3a61a79edb20.png
[095ccf0ea62c48058041f8894fca7453.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/22144ab6a2e5405cbb00e2cd2e928c65.png
[e8ae2d7a3f7a46c28c2bea13917d2a20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5e450c9a27344c6a8beb4b0d1332e403.png
[fc85d7bfc0634547834236b0ec540ab4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b1d4044b187542cba2f415b7d2810dc6.png
[cb6e770f7e7549e7afd236bd809c0c1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8508b570d687438a8b68c1476a70026b.png
[940c0d300b5b489f9640c603f39a027f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6e6773b07ef6410cbf0eeeb79548591f.png
[9e22ac0137184f9c9ef29e57e0261867.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/eaab3171551b4fb080e3202e18e55885.png
[d421332be8854c3ab8189cf0169dbe75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/68266f73831b473cbea78688ad6f3591.png
[08d480801a554fc684c055e41293b8d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/47a29423fa7f42f7bac17acd06fee049.png
[a1fd128fa832475c8d2d4b2679d2d76e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8b3011421b994c23930851c32329aed7.png
[e481fea3e9c64161abc18add687d432e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1e304e457a75441eb22d7ae86cb6ca18.png
[91ceb2fc5d804c018af8dee545267d3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/42c71de622fd4320b1e9d00dc289a42b.png
[b2c24b9d1a644546b1385ee09d316835.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a6ca7609d7594a8ca19a0f501d2c810a.png