html中vegetable选择器,css选择器高级用法

子元素选择器

使用场景

不同于后代选择器，只选择同一父元素的直接子元素

tips

后代元素：所有具有相同祖先的元素

子元素：所有具有相同的parent的元素(范围小于后代元素)

表示方法

大于号

s1与s2是父子关系

实例：#choose > option

表示选择id=choose下面的所有option子元素

扩展：

连续使用

#many>div>p.special

元素之间不存在越级

相邻兄弟元素选择器

使用场景

同一父元素的相邻子元素，两者挨在一起

表示方法

+

与是同级关系并且仅靠一起

示例：#food + div

选择第二个div元素

#food + div + div

非相邻兄弟元素选择器

使用场景

同一父元素的子元素，元素之间没有仅靠在一起

~

与是同级关系，我序紧靠一起

示例：#food~div

#many p.special~p

匹配到多个结果：与#many p.special元素同级的p元素

属性选择器(重要)

使用场景

选择具有某个属性(值)的元素

表示方法

*[属性=“属性值”]

*表示任意元素标签名，如p，div，li，button等

通常属性值没有空格或特殊字符，可以不加引号

实例：

[style] 具有style属性的任意元素

p[spec=len2] 属性spec = len2 的p元素

p[spec="len2 len3"] 属性spec=‘len2 len3’的p元素，len2 len3之间存在空格所以加引号

p[spec='len2'] 属性spec包含len2的p元素

p[spec^='len2'] 属性spec以len2开头的p

p[spec$='len2'] 属性spec以len2结尾的p

p[class=special][name=p1] #属性class=special并且属性name=p1的p

#many p[name=p1] 与后代选择器组合

#food>span+p[class=vegetable] 与兄弟选择器组合

组选择器

使用场景

当一组选择器无法选择我们需要的元素，可以通过多组选择器来选择元素

,

与表示两组不同的css选择器

实例：

div,span.p

同时选择所有div,span.p元素

扩展

#food > span,p 表示选择ID为food的所有span子元素和所有的p

#food >span,#food>p

表示选择id为food的span子元素和p子元素

伪类nth-child,nth-of-type:

使用场景

根据下标选择子元素，下标从1开始

表示方法：

:nth-child(n) #从中选择第n个元素，且表示的元素必须位于父元素的第n位

:nth-of-type(n) #从中选择第n个元素，对表示的元素处于第几位没有要求

n>1

表示一组选择器

示例：

p:nth-child(3)

选择其父元素下的第三个元素，元素类型必须是p

p:nth-of-type(3)

选择其父元素下的第三个p类型的元素，对于p元素位置没有要求

扩展

#food > span:nth-child(2)

选择#food元素下第二个元素,该元素必须是span

#food > p:nth-of-type(2)

选择#food元素下第二个p元素，无论位置在哪

编辑框操作

清空输入框

input_ele.clear()

获取输入框已经输入的文本

input_ele.get_attribult('value')

Tips:input_ele 是input对应的webelement对象

ele = driver.find_element_by_id('input1')

eles = driver.find_element_by_id('ta1')

ele.send_keys('fds')

ele.clear()

ele.send_keys('fdsfsafadsafdsa')

print(ele.get_attribute('value'))

eles.send_keys('131313')

print(eles.get_attribute('value'))

单选框

image.png

单选框有什么特点？

只能单选，不管原来该元素是否选中，直接去点击该元素即可，都可以确保该单选框被选中。

操作：

只要调用click就可以

gender = driver.find_element_by_css_selector('[value="male"]')

female = driver.find_element_by_css_selector('[value="female"]')

other = driver.find_element_by_css_selector('[value="other"]')

#判断是否被选中

print(gender.is_selected())

print(female.is_selected())

gender.click()

female.click()

other.click()

print(other.is_selected())

time.sleep(5)

driver.quit()

勾选框操作

什么是勾选框

image.png

勾选框有什么特点？

可以多选，点击被选中的元素则会取消选中状态，反之亦然

如何操作

通过is_selected()查看元素是否处于选中状态

调用click()进行选择

car = driver.find_element_by_css_selector('[value="car"]')

plan = driver.find_element_by_css_selector('[value="plane"]')

if not car.is_selected():

car.click()

if not plan.is_selected():

plan.click()

time.sleep(3)

复选框操作

有两种：

image.png

特点都是下拉框类型的元素

第一种可以通过ctrl+点击选择多个元素

第二种只能选择一个元素，且必须选择一个元素

如何操作：

将元素用select类包装一下

模拟选择(两种下拉框都通用)：调用select _by_visible_text(),参数是option元素的文本值。

取消选择(仅限第一种选择框)：deselect_by_visble_text()

取消所有选择(仅限第一种选择框)：deselect_all()

sele = Select(driver.find_element_by_id('multi'))

sele.select_by_index(0)

sele.select_by_value('benz')

time.sleep(5)

sele.deselect_by_visible_text('奥迪A6')

time.sleep(3)

#取消所有选择

sele.deselect_all()

xialakuang = Select(driver.find_element_by_id('single'))

# xialakuang.select_by_value('female')

# xialakuang.select_by_index(1)

xialakuang.select_by_visible_text('男')

xialakuang.deselect_all()

time.sleep(2)