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
标签以及 id
为 BYHY
的元素:
div, #BYHY
在 Selenium 中可以直接这么用:
elements = wd.find_elements(By.CSS_SELECTOR, 'div, #BYHY')
⚠️ 注意:虽然表达式的顺序是 div, #BYHY
,但最终返回的元素顺序由 HTML 页面中元素的出现顺序决定,而不是选择器书写的先后。
❌ 错误组写法示例
假设我们想选中 id=t1
容器中的 span
和 p
标签,很多初学者可能会写成:
#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()
vsnth-of-type()
是两个常见但容易混淆的定位工具- 兄弟选择器
+
和~
能帮助你按“位置关系”筛选相邻元素
这些 CSS 语法在 Selenium 中通过 By.CSS_SELECTOR
调用,使你可以用一种非常强大、精确的方式控制页面元素定位。