CSS定位

最新推荐文章于 2023-04-06 10:30:03 发布

你为什么这么熟练

最新推荐文章于 2023-04-06 10:30:03 发布

阅读量254

点赞数 1

文章标签： css html 爬虫

本文链接：https://blog.csdn.net/weixin_44127576/article/details/120657170

版权

本文详细介绍了CSS定位方法，包括类选择器、ID选择器、元素选择器等基本语法，并通过WebDriver+Python展示了如何在网页元素定位中运用这些选择器。同时，文章还提到了组合定位、属性定位以及一些特殊定位技巧，如通过属性部分匹配、开头或结尾匹配等，以增强元素定位的准确性。最后，给出了实际的HTML代码示例，帮助理解CSS选择器在自动化测试中的应用。

摘要由CSDN通过智能技术生成

CSS定位方法

CSS通过选择器为页面元素绑定属性，CSS选择器可以较为灵活地选择控件的任意属性，定位速度优于XPath。

CSS选择器常见语法：

选择器	例子	描述
.class	.main	class选择器，选择class="main"的所有元素
#id	#aside	id选择器，选择id="aside"的所有元素
*	*	选择所有元素
element	p	选择所有< p >元素
element > element	div > input	选择父元素为< div >的所有< input >元素
element + element	div + input	选择同一级中紧接着< div >元素之后的所有< input >元素
[attribute = value]	[target = _blank]	选择target="_blank"的所有元素

通过Web Driver + Python举例

百度输入框和百度搜索按钮的HTML代码：

在这里插入图片描述

通过class定位

find_element_by_css_selector(".s_ipt")
find_element_by_css_selector(".bg s_btn")

通过id定位

find_element_by_css_selector("#kw")
find_element_by_css_selector("#su")

通过标签名定位
```
find_element_by_css_selector("input")
```

通过标签层级关系定位

find_element_by_css_selector("span > input")

通过属性定位

find_element_by_css_selector("[autocomplete=off]")
find_element_by_css_selector("[name='wd']")
find_element_by_css_selector("[type="submit"]")

对属性值来说引号可加可不加

组合定位

通过组合定位增加定位元素的唯一性

find_element_by_css_selector("form.fm > span > input.s_ipt")
find_element_by_css_selector("form#form > span > input#kw")

#1.查找class属性包含“s_ipt_wr”字符串的元素
find_element_by_css_selector("[class*=s_ipt_wr]")

#2.查找class属性以“bg”字符串开头的元素
find_element_by_css_selector("[class^=bg]")

#3.查找class以“warp”字符串结尾的元素
find_element_by_css_selector("[class$=warp]")

#4.查找form标签下面第二个input标签的元素
find_element_by_css_selector("form > input:nth-child")