十分钟教会你使用CCS定位Html的元素

本文介绍了如何使用CSS选择器高效地定位HTML元素,强调了CSS定位相对于XPath的优势,并通过实例展示了如何通过元素的id、class、标签名及层级关系进行定位。同时,文章提供了百度搜索框和CSDN页面的定位示例,帮助读者更好地理解和应用CSS定位。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先,先介绍一下,大概的格式为(这里我称作参数,可能叫法不准确,大概这个意思):

标签名+[属性名="参数"]

这些都是在定位元素时都会有的,当然这些都是标准参数,有两个比较特殊的属性是idclass,这两个属性可以分别使用英文符号#和.代替.比如定位一个有id,name,class name属性的这些元素的输入框;
使用id就是input#参数(这个参数如果加了中括号需要带上引号),但是标准的格式是input[id=“参数”],可能你的写法是driver.find_element_by_id(参数)

但是很多情况下,实际中没有这些标准的元素,像是(不分顺序先后)
div/p/span/a/tr/td/table,以及还有一些自定义标签名,这些再使用id,name,class name,是无法完后元素定位,这个时候,差不多的人只能使用xpath了,但是,这个我可以很肯定的告诉你,这个很陋,非常陋.假设这个Web很复杂,页面元素很多,那么你全部的代码都是被Xpath的路径占了位置,注释也没有位置去写,用过的应该都清楚,如何你并行写,估计200行的代码,要上300多行,而且,追寻问题也不是,很方便,所以这里CSS可以告诉你,是非常的香,同样也是非常的快.
这是我的一个登录的例子,应该可以参考下,差不多是万能的,但是基本就是这个格式,他的输入框是不存在id,name,class name等一系列属性的,希望你会有兴趣
在这里插入图片描述
这个格式想必很清楚了,而且也是非常的简单
在这里插入图片描述
这中间应不难看出,一般的输入框都会有提示信息,所以,利用这个提示信息,是不存在定位不到的
在这里插入图片描述
使用我们熟

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值