当前位置: 首页 > news >正文

CSS表达式——下篇【selenium】

CSS选择器的组合与进阶用法

在自动化测试或网页抓取中,CSS选择器不仅能定位单个元素,还支持组合使用,帮助我们准确锁定嵌套结构或多个条件的元素。


✅ 联合定位:层级结构的组合

假设我们要选中网页中这段 HTML 结构里的 版权 标签:

<div id="bottom"><div class="footer1"><span class="copyright">版权</span><span class="date">发布日期:2018-03-03</span></div>
</div>

我们可以利用选择器语法,指定 span 标签和其上级的结构关系,比如:

div.footer1 > span.copyright

含义是:选择 class 为 copyright 的 span 元素,且它是 class 为 footer1 的 div 的直接子元素

我们还可以进一步简化:

.footer1 > .copyright

不限定标签类型,只关注类名的结构匹配。

如果不强制“直接子节点”,而是允许任意层级后代关系,还可以用空格代替 >

.footer1 .copyright

✅ 多重选择:组选择(Group Selector)

有时候我们希望一次性选中多种类型的元素,可以用 逗号 , 来组合多个条件。

例如,选中所有植物和动物的标签:

.plant, .animal

如果你还想同时选中所有 div 标签以及 idBYHY 的元素:

div, #BYHY

在 Selenium 中可以直接这么用:

elements = wd.find_elements(By.CSS_SELECTOR, 'div, #BYHY')

⚠️ 注意:虽然表达式的顺序是 div, #BYHY,但最终返回的元素顺序由 HTML 页面中元素的出现顺序决定,而不是选择器书写的先后。


❌ 错误组写法示例

假设我们想选中 id=t1 容器中的 spanp 标签,很多初学者可能会写成:

#t1 > span, p

但这个选择器实际的意思是:

  • 匹配 #t1 下的 span
  • 整个文档中的所有 p 标签

这会导致选择器“范围溢出”。

正确写法应该是:

#t1 > span, #t1 > p

确保每一个选择项都带有完整的上下文。


🎯 精准定位:按顺序选中子节点

借助 :nth-child():nth-of-type() 等伪类,我们可以按位置选中特定元素。

HTML 示例:

<div id="t1"><h3>唐诗</h3><span>李白</span><p>静夜思</p><span>杜甫</span><p>春夜喜雨</p>
</div>
✅ 选择第二个子元素:
span:nth-child(2)

含义是:选择在其父元素中,排列位置是第2位的 span 元素(注意,位置是按所有子节点计算,不是只看 span)。

❗如果不指定标签类型:
:nth-child(2)

表示:选中父元素中所有类型中排第2的那个,不管它是什么标签。


🔁 倒数选择

nth-child(n) 相对的是 nth-last-child(n),它是从结尾往前数。

例子:

p:nth-last-child(1)

代表:倒数第一个且是 <p> 标签的元素。


✅ 按标签类型顺序匹配(更推荐)

使用 nth-of-type(n) 更准确,只看特定标签类型的顺序。

span:nth-of-type(1)

选择的是:当前父元素中第一个 <span> 标签。

类似地:

p:nth-last-of-type(2)

就是倒数第二个 <p> 标签。


🔁 奇偶位置选择

快速选中偶数或奇数序号的元素也非常常见。

  • 偶数子节点(无类型限制):
:nth-child(even)
  • 奇数子节点(无类型限制):
:nth-child(odd)
  • 偶数个某类型元素:
p:nth-of-type(even)
  • 奇数个某类型元素:
p:nth-of-type(odd)

这些可以用在循环内容或列表内容的批量样式处理上,也适合 UI 测试中进行校验。


👬 兄弟节点定位技巧

有些元素和目标元素是同级的,CSS 也提供了选择这些“兄弟”的方法。

✅ 相邻兄弟选择器(紧挨着的)
h3 + span

选中的是:紧跟在 <h3> 标签后面的第一个 <span> 元素

✅ 后续所有兄弟
h3 ~ span

表示选中:同一个父元素下,所有在 <h3> 后出现的 <span> 标签


🔚 总结说明

  • 组合选择器(比如 .a > .b)适用于父子层级结构
  • 组选择器(如 .x, .y)适合多目标统一操作
  • nth-child() vs nth-of-type() 是两个常见但容易混淆的定位工具
  • 兄弟选择器 +~ 能帮助你按“位置关系”筛选相邻元素

这些 CSS 语法在 Selenium 中通过 By.CSS_SELECTOR 调用,使你可以用一种非常强大、精确的方式控制页面元素定位。

http://www.dtcms.com/a/271964.html

相关文章:

  • WebSocket实战:实现实时聊天应用 - 双向通信技术详解
  • 【C++】——类和对象(上)
  • C 语言基础:操作符、进制与数据表示通俗讲解
  • AI【应用 03】Windows环境部署 TTS CosyVoice2.0 详细流程记录(Matcha-TTS、spk2info.pt等文件分享)
  • Qt中处理多个同类型对象共享槽函数应用
  • git多分支管理
  • 缺陷的生命周期(Bug Life Cycle)是什么?
  • Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
  • WWDC 25 风云再起:SwiftUI 7 Charts 心法从 2D 到 3D 的华丽蜕变
  • 【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
  • 全面解析 wxPython:构建原生桌面应用的 Python GUI 框架
  • 【计算机基础理论知识】C++篇(二)
  • [python] 数据拷贝浪费内存,原地修改暗藏风险:如何平衡内存使用效率与数据完整性?
  • 【SpringBoot实战系列】SpringBoot3.X 整合 MinIO 存储原生方案
  • C++类对象多态底层原理及扩展问题
  • Python-GEE遥感云大数据分析与可视化(如何建立基于云计算的森林监测预警系统)
  • Yolov模型参数对比
  • Docker的/var/lib/docker/目录占用100%的处理方法
  • 变压器初级(原边)和次级(副边)的感应电动势、电压方向如何标注?
  • 安卓应用启动崩溃的问题排查记录
  • 《Effective Python》第十三章 测试与调试——使用 Mock 测试具有复杂依赖的代码
  • 【笔记分享】集合的基数、群、环、域
  • Python毕业设计232—基于python+Django+vue的图书管理系统(源代码+数据库)
  • EXCEL_单元格中图片调整代码留存
  • 什么是Kibana
  • 【C++】第十四节—模版进阶(非类型模版参数+模板的特化+模版分离编译+模版总结)
  • 保姆级搭建harbor私有仓库与docker-ce教程与使用教程
  • 机器学习基础:从理论到实践的完整指南
  • 解锁医疗新视界:医患共决策时间轴AI可视化工具
  • Linux面试问题-软件测试