css定位

原创已于 2022-04-25 17:20:11 修改 · 372 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #其他

于 2022-04-25 17:19:26 首次发布

学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了CSS在HTML元素定位中的应用，强调了CSS选择器的重要性。内容涵盖id选择器、class选择器、元素选择器、属性选择器和层级选择器的用法，并通过实例演示了如何使用这些选择器进行元素定位。CSS被指出比XPath更快，但在某些情况下可能不支持下标。

1、css

css是一种语言，用来描述HTML元素的显示样式
选择器是css的一种模式，用于选择需要添加的样式的元素
在selenium中可以使用选择器来定位元素
css比xpath更快且语法更强大，但css不支持下标

2、定位方法

find_element_by_css_selector(css_selector)
# css_selector表示的是css选择器表达式

id选择器
class选择器
元素选择器
属性选择器
层级选择器

2.1id选择器

表达式：

#id     #表示通过元素的ID属性进行元素选择    id是id属性的值

栗子：
ps：没有办法准确定位哦~
在这里插入图片描述

2.2 class选择器

表达式:

.class  .表示通过元素的class属性进行选择   
		class表示class属性中的一个值

栗子：
下面两种都是可以的！任意一个值就可以定位到！
在这里插入图片描述

2.3 元素选择器

通过元素标签名称来选择元素

表达式:

tag_name
相同标签名称的元素有很多，所以不会精确定位，不推荐使用

2.4 属性选择器

通过元素的属性来选择元素。

表达式：

[attribute='value']

栗子：
在这里插入图片描述
注意：如果是class属性，多个值，需要全部写上

2.5 层级选择器

可以结合前面所学灵活变换

1、直接父子层级关系
格式1：element1>element2 
通过element1来定位element2，并且element2必须为element1的直接子元素
例如1：p[id='p1']>input <定位指定p元素下的直接子元素input>

2、隔代层级关系选择器
格式2：element1 element2 通过element1来定位element2，并且element2为element1的后代元素
例如2：p[id='p1'] input <定位指定p元素下的后代元素input>
例如3：p input[name='passwordA']  p元素下 name属性值为passwordA的input元素

2.6 扩展

input[type^='p']       type属性以p字母开头的元素；^以' xxx'开头
input[type$='d']       type属性以d字母结束的元素；$以'xxx’结尾
input[type*='w']       type属性包含w字母的元素；*包含'xxx‘